css3-animation与lottie动画

css3动画

常用的动画属性：

• animation-name:test
  动画名称，唯一标识，与@keyframes相对接，必选属性；
• animation-duration:5s
  动画的单次生效时间,不包含animation-delay在内，必选
  示例：
  animation-interation-count: 2, animation-delay: 5s, animation-duration: 10s
• animation-timing-function: linear;
  动画的速率曲线，非必选,默认值为ease:低速开始，然后变快，在结束前减速
• animation-delay: 2s;
  动画延迟时间，非必选，默认0延迟
• animation-iteration-count: infinite;
  规定动画被播放的次数，非必选，默认一次
• animation-direction: alternate;
  规定动画在下一周是否逆向地播放,非必选，默认值normal,但设置的条件必须是
• animation-iteration-count 在两次以上,否则不生效；
• animation-play-state: running;
  规定动画是否正在运行或暂停(非必选)

js控制动画的暂停

// 修改-webkit-animation-play-state属性
// 去掉中划线"-"，将"-"后的第一个字母大写 => WebkitAnimationPlayState
 document.getElementById("loading").style.WebkitAnimationPlayState
// animation-play-state  去掉中划线"-"，将"-"后的第一个字母大写 => animationPlayState
document.getElementById("loading").style.animationPlayState

// js
 /*暂停扫描按钮*/
 function loadingStop(){
     document.getElementById("loading").style.animationPlayState = "paused";
     document.getElementById("loading").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代码
 }
 /*继续扫描按钮*/
 function loadingStart(){
     document.getElementById("loading").style.animationPlayState = "running";
     document.getElementById("loading").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代码
 }

/*动画css*/
.loading {
  position: relative;
  width: 0;
  padding: 20px;
  background:
   linear-gradient(rgba(0,102,205,1) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.4) 70%),
   linear-gradient(to left, rgba(0,102,205,.2) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.8) 70%);
  background-repeat: no-repeat;
  background-size: 10% 100%, 100% 10%;
  background-position: 50% 0%, 0 50%;
  
  -webkit-animation: loading .7s infinite steps(8); /*绑定的关键帧名称 动画时间 动画循环次数 */
  animation: loading .7s infinite steps(8);

js监听动画

在做前端页面时，如果一个页面有多套动画特效依次播放。我们一般采用setTimeout延时，就可以完美解决动画依次执行的效果，但存在以下问题：
1、如果动画很多的话会让人感觉很累，因为每个动画动摇计算前方动画所运行的时间。
2、如果中间某个动画的运行时间进行修改的话，后面所有的动画都需要修改。
所以，在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要监听动画结束进行回调。JS提供了以下事件用于监听动画的结束：

CSS 动画播放时，会发生以下三个事件：
animationstart -CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发
代码如下：

var monkey = document.querySelector("#monkey");
monkey.addEventListener("animationstart",function(e){
    console.log("start");
},false);
monkey.addEventListener("animationiteration",function(e){
    console.log("");
},false);
monkey.addEventListener("animationend",function(e){
    console.log("end");
},false);

不同的浏览器要求使用不同的前缀：
No prefix - animationstart, animationiteration, animationend
Webkit - webkitAnimationStart, webkitAnimationIteration, webkitAnimationEnd
Mozilla - mozAnimationStart, mozAnimationIteration, mozAnimationEnd
MS - MSAnimationStart, MSAnimationIteration, MSAnimationEnd
O – oAnimationStart, oAnimationIteration, oAnimationEnd

lottie动画

vue项目使用lottie（主要看安装依赖步骤）

一、安装vue-lottie

 npm install --save vue-lottie

二、引用vue-lottie
在main.js引入并全局注册组件也可在页面单独引用

 import lottie from 'vue-lottie';
 Vue.component('lottie', lottie)

三、引入Lottie动画资源
1、script中引入资源

 import * as animationData from "../../public/data/data.json";

2、data里面添加相应属性

 defaultOptions: { animationData: animationData.default }

3、template里使用Lottie组件

4、定义方法

 //说明：lottie初始化时，需要指定一个options配置项，因为lottie是没有宽高的，所以宽高必须设置，animCreated方法用于创建lottie动画，它的方法返回一个anim对象，里面包含这个动画的所有属性。我们可以根据它返回的这个对象，来对lottie动画做一系列的控制
     handleAnimation: function(anim) {
         this.anim = anim;
         console.log(anim); //这里可以看到 lottie 对象的全部属性
     }

说明：关于json文件中引入图片路径的问题，在vue-cli 3.0版本以上 static 文件夹 由 public 文件夹代替，static/public 文件夹打包是不经过编译的，也就是说 我将 data.json 放在 public/data 里，将动画图片放在 public/images 里，在打包之后的 dist 文件夹里会直接生成 data和images文件夹，那么json文件引入图片路径在打包编译之前和之后都是一样的 "../images/"

image.png

image.png

lottie-web基本用法

一、安装依赖
npm install lottie-web
二、在组件内引用
import lottie from 'lottie-web';
三、js方式使用

 this.lottie = lottie.loadAnimation({
            container: document.getElementById("containar"), // 容器
            renderer: 'svg', // 'svg' / 'canvas' / 'html'  渲染方式，svg、canvas、html（轻量版仅svg渲染）
            loop: false, // 动画是否循环
            autoplay: false, // 是否自动播放
            path: 'https://assets1.lottiefiles.com/packages/lf20_zCoscc.json', // 动画文件json路径
        });

this.lottie.play(); // 播放该动画，从目前停止的帧开始播放
this.lottie.stop(); // 停止播放该动画，回到第0帧
this.lottie.pause(); // 暂停该动画，在当前帧停止并保持
this.lottie.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
this.lottie.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
this.lottie.goToAndStop(30, true); // 跳转到第30帧并停止
this.lottie.goToAndPlay(300); // 跳转到第300毫秒并播放
this.lottie.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
this.lottie.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧
this.lottie.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18
this.lottie.setSpeed(speed); // 设置播放速度，speed为1表示正常速度
this.lottie.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
this.lottie.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法

1、实例对应的方法：
play、stop、pause、setSpeed(speed)、goToAndStop(value, isFrame)、goToAndPlay(value, isFrame)、setDirection(direction)、destroy、getDuration、playSegments(segments, forceFlag)、setSubframe(useSubFrames)
2、全局方法

image.png

3、事件监听方式一： onComplete、onLoopComplete、onEnterFrame、onSegmentStart

  //事件监听： onComplete、onLoopComplete、onEnterFrame、onSegmentStart
        this.lottie.onComplete = () => {
            console.log("onComplete..."); //eslint-disable-line
        }
        this.lottie.onLoopComplete = function () {
            console.log("onComplete..."); //eslint-disable-line
        }

4、事件监听方式二: addEventListener 事件监听
complete、 loopComplete、enterFrame、segmentStart、 destroy
config_ready (when initial config is done)、
data_ready (when all parts of the animation have been loaded)、
data_failed (when part of the animation can not be loaded)、
loaded_images (when all image loads have either succeeded or errored)、
DOMLoaded (when elements have been added to the DOM)

 this.lottie.addEventListener("data_ready", () => {
     console.log("data_ready..."); //eslint-disable-line
 });
 this.lottie.addEventListener("DOMLoaded", () => {
    console.log("DOMLoaded..."); //eslint-disable-line
 });

this.lottie.addEventListener('data_ready', () => { console.log('animation data has loaded'); });

data_ready：加载完动画json文件
complete: 播放完成（循环播放下不会触发）
loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
data_ready: 动画json文件加载完毕触发 * DOMLoaded: 动画相关的dom已经被添加到html后触发
destroy: 将在动画删除时触发

四、html方式使用
必写：class="lottie"，data-animation-path
可选：data-anim-loop，data-name， data-anim-type

完整demo：

————————————————
版权声明：本部分为CSDN博主「栗子hl」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012574931/article/details/103582645