# Keyframes

**Repository Path**: HarmonyOS-tpc/Keyframes

## Basic Information

- **Project Name**: Keyframes
- **Description**: Keyframes is a combination of (1) an ExtendScript script that extracts image animation data from an After Effects file and (2) a corresponding rendering library for OpenHarmony.
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-04-01
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: harmony

**Tags**: None

## README

# Keyframes

Keyframes is a combination of (1) an ExtendScript script that extracts image animation data from an After Effects file and (2) a corresponding rendering library for OpenHarmony.  
Keyframes can be used to export and render high quality, vector based animations with complex shape and path curves, all with minimal file footprint.

## Usage

### Developing Animations in After Effects

For a detailed list of constraints for developing animations to use with the Keyframes library, please refer to the [Keyframes After Effects Guidelines](/docs/AfterEffectsGuideline.md).

### Image Data Extraction

Use of the extraction script requires an installation of **Adobe After Effects** as well as **Adobe ExtendScript Toolkit**.  If Keyframes JSON files are already available, only the corresponding iOS and Android libraries are needed.

For detailed steps on running the ExtendScript script on your AE comp, please refer to the instructions detailed [here](/scripts).


### Rendering

### Download
```groovy
compile 'io.openharmony.tpc.thirdlib:Keyframes:1.0.0'
```
#### Rendering setup

Use the provided deserializers on the generated JSON blob from the **Image Data Extraction** step to create a `KFImage` model object.  If your JSON blob lives in the assets directory, this might look like:
```java
InputStream stream = getResources().getAssets().open("asset_name");
KFImage kfImage = KFImageDeserializer.deserialize(stream);
```
A KeyframesDrawable object can be created now using this `KFImage`, and this drawable can be used as a normal drawable.  It is highly recommended to use the software layer on any views displaying Keyframes animations.
```java
KeyframesDrawable kfDrawable = new KeyframesDrawableBuilder().withImage(kfImage).build();

ImageView imageView = (ImageView) findViewById(R.id.some_image_view);
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
imageView.setImageDrawable(kfDrawable);
imageView.setImageAlpha(0);
```

#### Play!
Use the start and stop animations on the drawable when appropriate to begin playback of the animation or end it after the end of the current loop.
```java
// Starts a loop that progresses animation from the beginning and invalidates the drawable.
kfDrawable.startAnimation();

// Pause the animation at current progress.
kfDrawable.pauseAnimation();

// Resume the animation from where we paused last time.
kfDrawable.resumeAnimation();

// Stops the animation.
kfDrawable.stopAnimation();

// Stops the animation when the current animation ends.
kfDrawable.stopAnimationAtLoopEnd();

// Starts the animation and plays it once. Will stop at the end
kfDrawable.playOnce();
```