background:
Pag implementation pain points document: libpag reference document
1. Missing types of packaging dependencies
2. Pagview initialization file is too large, affecting mini program packaging
3. Poor compatibility
Pain points in key frame animation implementation:
When the key frames change too much, it is impossible to accurately tell how many key frames need to be written and the specific parameters of each key frame, which will cause the animation playback effect to have a "stuck" feeling.
Implementation plan: 1. Export animations produced by AE as CSS code
how to install
Download the BX-AE2CSS.jsx file, right-click here - Save link as.
Open AE, click File->Script->Run Script File... Then select the BX_AE2CSS.jsx you just downloaded.
Or you can copy BX_AE2CSS.jsx to the AE script folder:
Windows:
C:\Program Files\Adobe\Adobe After Effects <版本>\Support Files\Script\
Mac:
/Applications/Adobe After Effects <版本>/Scripts/
This way you can directly select `BX_AE2CSS.jsx` from `File`->`Script`
Precautions
1. Currently, only the "displacement, rotation, scaling, and transparency" animations of solid color layers and image layers can be exported, and expressions and parent-child levels are supported. Please export complex animations in sprite form.
2. It is not recommended to export animations that are too long, as the amount of data will be large.
how to use
1. Select the layer that needs to be exported in AE composition and mark the corresponding "export mark".
2. If the layer is an image layer (png, jpg) or a pre-composition that you want to export as an image, use the "Mark CSS" button to mark it; if you want to export a sprite, please put the sprite animation into the pre-composition and use "Mark sprite" button to mark.
3. After confirming that the settings are correct, click the "Export CSS" button to export the animation.
For detailed operations, you can watch this video
BX-AE2CSS demonstration_bilibili_bilibili
Parameter Description
Interpolation method - the default is "steps(1)", that is, "no interpolation", and the default frame-by-frame export can avoid some frame skipping phenomena. If you need to manually adjust the keyframes after exporting, you can choose other methods, see CSS Animation instructions for details .
Number of Loops - As the name suggests, the default is an infinite loop.
Animation Direction - Determines whether the animation plays forward or reverse.
Animation fill mode - Behavior at the beginning and end of animation playback, please refer to the official CSS Animation instructions for details.
Custom prefix - The format of the exported class name is "BX_+prefix+_Class+layer number", adding a custom prefix can prevent conflicts with other class names in the project. Default is empty.
Frame by frame export - Due to limited capabilities, animations can only be exported frame by frame, and the export code will be a little longer. Subsequent versions will attempt to incorporate automatic Bezier interpolation to optimize exported code.
Separate CSS file - Whether to generate a separate CSS file. You can also export the entire Html preview code.
Sprite parameters
Maximum width - the maximum width of the sprite file after splicing. If it exceeds this value, it will wrap. Note that the assembled image can only be up to 30000x30000 pixels. If it exceeds this value, the export will fail.
How many frames to skip - Reduce the sprite size. The more frames you skip, the laggy the animation will be.
Full Length/Crop to Workspace - If the sprite animation is inconsistent with the composition workspace duration, "Full Length" mode will maintain the duration of the sprite animation, and "Crop to Workspace" will limit the time range of the sprite animation to the composition within the work area.
References
1、https://raw.githubusercontent.com/bigxixi/ReadMe-Resources/master/ae2css/basicdemo.gif
[ AE Project File ] [ Online Demonstration ]
2、https://raw.githubusercontent.com/bigxixi/ReadMe-Resources/master/ae2css/lanterndemo.gif
[ AE Project File ] [ Online Demonstration ]
3、https://raw.githubusercontent.com/bigxixi/ReadMe-Resources/master/ae2css/bikingdemo.gif
[ AE Project File ][ Online Demonstration ]
Precautions
If the directly exported CSS style has too many keyframes and the animation speed curve is step (step length), the iOS system may cause lag. The most likely reason is that iOS does not trigger the smart frame complementing logic. At this time, changing the interpolator is ok. , changing step to ease can solve the "stuck feeling".
Animation optimization:
1. Hardware acceleration
transform: translate3d(0, 0, 0)；
will-change：transform；
2. Monitor animation events (start-end)
Use bindtransitionend bindanimationstart bindanimationiteration bindanimationend to listen for animation events during animation execution.
bindtransitionend: monitor the end of CSS gradient or wx.createAnimation end of a stage
Note: bindtransitionend monitors the end of a stage of wx.createAnimation rather than the end of the entire animation (that is, the end of a step())
bindanimationstart: monitor the start of CSS animation
bindanimationiteration: CSS animation ends a stage (used when looping animation)
bindanimationend: CSS animation end
Note: bindanimationstart bindanimationiteration bindanimationend cannot monitor the animation created by wx.createAnimation
Note: These events are not bubbling events and need to be bound to the node where the animation actually occurs to take effect.