使用lottie操作动画，lottie for web，入门点赞动画

lottie可以让前端更好的控制动画，既能使动画流畅运行又可以进行一定的干预。
lottie是用设计师使用AE制作动画，然后用bodymovin插件去导出的json，前端工程师使用这个json去实现动画。
这个动画更加依赖设计师。前端工程师使用对应的api可以对动画进行一些事件上的操作，主要是操作时间流。

lottie

首先安装lottie

npm install lottie-web

在组件内引用

import lottie from 'lottie-web';

初始化lottie

//在mounted里引用，注意钩子的生命周期，created里#bm这个元素还未创建
this.lottie = lottie.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: data
});

这是我制作的一个简单应用。

效果图

github地址

下面贴一下这个效果的组件源代码

动画实例有以下主要方法：

animation instances have these main methods:

• anim.play()
• anim.stop()
• anim.pause()
• anim.setLocationHref(locationHref) -- one param usually pass as location.href. Its useful when you experience mask issue in safari where your url does not have # symbol.
• anim.setSpeed(speed) -- one param speed (1 is normal speed)
• anim.goToAndStop(value, isFrame) first param is a numeric value. second param is a boolean that defines time or frames for first param
• anim.goToAndPlay(value, isFrame) first param is a numeric value. second param is a boolean that defines time or frames for first param
• anim.setDirection(direction) -- one param direction (1 is normal direction.)
• anim.playSegments(segments, forceFlag) -- first param is a single array or multiple arrays of two values each(fromFrame,toFrame), second param is a boolean for forcing the new segment right awa
• anim.setSubframe(flag) -- If false, it will respect the original AE fps. If true, it will update as much as possible. (true by default
• anim.destroy()

lottie has 8 main methods:

• lottie.play() -- with 1 optional parameter name to target a specific animation
• lottie.stop() -- with 1 optional parameter name to target a specific animation
• lottie.setSpeed() -- first param speed (1 is normal speed) -- with 1 optional parameter name to target a specific animation
• lottie.setDirection() -- first param direction (1 is normal direction.) -- with 1 optional parameter name to target a specific animation
• lottie.searchAnimations() -- looks for elements with class "lottie"
• lottie.loadAnimation() -- Explained above. returns an animation instance to control individually.
• lottie.destroy() -- To destroy and release resources. The DOM element will be emptied.
• lottie.registerAnimation() -- you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url
• lottie.setQuality() -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.

请详细查看lottie官方文档
本次使用的json是由蚂蚁设计生成