前端实现炫酷动效_Lottie-前端实现AE动效
阅读时间 10~15min
项目背景
项目中为了优化用户体验加入了几处微交互动画,过期的流程都是设计输出合成的雪碧图,前端通过序列帧实现动画效果,如下图动画效果:
序列帧:
动画效果:
序列帧:
帧动画的缺点和局限性比较明显,合成的雪碧图文件大,且在不同屏幕分辨率下可能会失真。经调研发现,Lottie是个简单、高效且性能高的动画方案。
Lottie是可应用于Android, iOS, Web和Windows的库,通过Bodymovin解析AE动画,并导出可在移动端和web端渲染动画的json文件。换言之,设计师用AE把动画效果做出来,再用Bodymovin导出相应地json文件给到前端,前端使用Lottie库就可以实现动画效果。
Bodymovin插件的安装与使用
关闭AE
把下载好的bodymovin.zxp拖到ZXP installer
打开AE,在菜单首选项->常规中勾选:ballot_box_with_check:允许脚本写入文件和访问网络(否则输出JSON文件时会失败)
在AE中制作动画,打开菜单窗口->拓展->Bodymovin,勾选要输出的动画,并设置输出文件目录,点击render
打开输出目录会看到生成的JSON文件,若动画里导入了外部图片,则会在images中存放JSON中引用的图片
前端使用lottie
NPM
npm install lottie-web
复制代码
调用loadAnimation
lottie.loadAnimation({
container: element,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
});
复制代码
vue-lottie
也可以在vue中使用lottie
import lottie from '../lib/lottie';
import * as favAnmData from '../../raw/fav.json';
export default {
props: {
options: {
type: Object,
required: true
},
height: Number,
width: Number,
},
data () {
return {
style: {
width: this.width ? `${this.width}px` : '100%',
height: this.height ? `${this.height}px` : '100%',
overflow: 'hidden',
margin: '0 auto'
}
}
},
mounted () {
this.anim = lottie.loadAnimation({
container: this.$refs.lavContainer,
renderer: 'svg',
loop: this.options.loop !== false,
autoplay: this.options.autoplay !== false,
animationData: favAnmData,
assetsPath: this.options.assetsPath,
rendererSettings: this.options.rendererSettings
}
);
this.$emit('animCreated', this.anim)
}
}
复制代码
loadAnimation参数
container
用于渲染动画的HTML元素,需确保在调用loadAnimation时该元素已存在
renderer
渲染器,可选值为'svg'(默认值)/'canvas'/'html'。svg支持的功能最多,但html的性能更好且支持3d图层。各选项值支持的功能列表在此
loop
默认值为true。可传递需要循环的特定次数
autoplay
自动播放
path
JSON文件路径
animationData
JSON数据,与path互斥
name
传递该参数后,可在之后通过lottie引用该动画实例
rendererSettings
可传递给renderer实例的特定设置,具体可看
Lottie动画监听
Lottie提供了用于监听动画执行情况的事件:
complete
loopComplete
enterFrame
segmentStart
config_ready(初始配置完成)
data_ready(所有动画数据加载完成)
DOMLoaded(元素已添加到DOM节点)
destroy
可使用addEventListener监听事件
// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);
// 当前循环播放完成触发
anm.addEventListener('loopComplete', anmComplete);
// 播放一帧动画的时候触发
anm.addEventListener('enterFrame', enterFrame);
复制代码
控制动画播放速度和进度
可使用anm.pause和anm.play暂停和播放动画,调用anm.stop则会停止动画播放并回到动画第一帧的画面。
使用anm.setSpeed(speed)可调节动画速度,而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定帧数,也可结合anm.totalFrames控制进度百分比,比如可传anm.totalFrames - 1跳到最后一帧。
anm.goToAndStop(anm.totalFrames - 1, 1);
复制代码
这样的好处是可以把相关联的JSON文件合并,通过anm.goToAndPlay控制动画状态的切换,如下图例中一个JSON文件包含了2个动画状态的数据:
图片资源
JSON文件里assets设置了对图片的引用:
若想统一修改静态资源路径或者设置成绝对路径,可在调用loadAnimation时传入assetsPath参数:
lottie.loadAnimation({
container: element,
renderer: 'svg',
path: 'data.json',
assetsPath: 'URL’ // 静态资源绝对路径
});
复制代码
功能支持列表
即使用bodymovin成功输出了JSON文件(没有报错),也会出现动效不如预期的情况,比如这是在AE中构建的形象图:
但在页面中渲染效果是这样的:
这是因为使用了不支持的Merge Paths功能
因此对设计师而言,创建Lottie动画和往常制作AE动画有所不同,此文档记录了Bodymovin支持输出的AE功能列表,动画制作前需跟设计师沟通好,根据动画加载平台来确认可使用的AE功能。
尽量遵循官方文档里对设计过程的指导和建议:
动画简单化。创建动画时需时刻记着保持JSON文件的精简,比如尽可能地绑定父子关系,在相似的图层上复制相同的关键帧会增加额外的代码,尽量不使用占用空间最多的路径关键帧动画。诸如自动跟踪描绘、颤动之类的技术会使得JSON文件变得非常大且耗性能。
建立形状图层。将AI、EPS、SVG和PDF等资源转换成形状图层否则无法在Lottie中正常使用,转换好后注意删除该资源以防被导出到JSON文件。
设置尺寸。在AE中可设置合成尺寸为任意大小,但需确保导出时合成尺寸和资源尺寸大小保持一致。
不使用表达式和特效。Lottie暂不支持。
注意遮罩尺寸。若使用alpha遮罩,遮照的大小会对性能产生很大的影响。尽可能地把遮罩尺寸维持到最小。
动画调试。若输出动画破损,通过每次导出特定图层来调试出哪些图层出了问题。然后在github中附上该图层文件提交问题,选择用其他方式重构该图层。
不使用混合模式和亮度蒙版。
不添加图层样式。
全屏动画。设置比想要支持的最宽屏幕更宽的导出尺寸。
设置空白对象。若使用空白对象,需确保勾选可见并设置透明度为0%否则不会被导出到JSON文件。
预览效果
由于以上所说的功能支持问题会导致输出动画效果不确定性,设计师和前端之间有个动画效果联调的过程,为了提高联调效率,设计师可先进行初步的效果预览,再把文件交付给前端。
方法1:输出预览HTML文件
渲染前设置所要渲染的文件
勾选☑️Demo选项
在输出的文件目录中就可找到可预览的demo.html文件
方法2:LottieFiles分享平台
把生成的JSON文件传到LottieFiles平台,可播放、暂停生成文件的动画效果,可设置图层颜色、动画速度,也可以下载lottie preview客户端在iOS或Android机子上预览。
LottieFiles平台还提供了很多线上公开的Lottie动画效果,可直接下载JSON文件使用
交互hack
Lottie的不足之处是没有对应的API操纵动画层,若想做更细化的动画处理,只能直接操作节点来实现。比如当播放完左图动画进入惊讶状态后,若想实现右图随鼠标移动而控制动画层的简单效果:
开启调试面板可以看到,lottie-web通过使用标签的transform属性来控制动画:
当元素已添加到DOM节点,找到想要控制的标签,提取其transform属性的矩阵值,并使用rematrix解析矩阵值。
onIntroDone() {
const Gs = this.refs.svg.querySelectorAll('svg > g > g > g');
Gs.forEach((node, i) => {
// 过滤需要修改的节点
...
// 获取transform属性值
const styleArr = node.getAttribute('transform').split(',');
styleArr[0] = styleArr[0].replace('matrix(', '');
styleArr[5] = styleArr[5].replace(')', '');
const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]}, ${styleArr[5]})`;
// 使用Rematrix解析
const transform = Rematrix.parse(style);
this.matrices.push({
node,
transform,
prevTransform: transform
});
}
}
复制代码
监听鼠标移动,设置新的transform属性值。
onMouseMove = (e) => {
this.mouseCoords.x = e.clientX || e.pageX;
this.mouseCoords.y = e.clientY || e.pageY;
let x = this.mouseCoords.x - (this.props.browser.width / 2);
let y = this.mouseCoords.y - (this.props.browser.height / 2);
const diffX = (this.mouseCoords.prevX - x);
const diffY = (this.mouseCoords.prevY - y);
this.mouseCoords.prevX = x;
this.mouseCoords.prevY = y;
this.matrices.forEach((matrix, i) => {
let translate = Rematrix.translate(diffX, diffY);
const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply);
const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`;
matrix.prevTransform = product;
matrix.node.setAttribute('transform', css);
})
}
复制代码
进一步优化
看到一个方法,在AE中将图层命名为**#id格式,生成的SVG相应的图层id会被设置为id**,命名为**.class格式,相应的图层class会被设置为class**
试了下的确可以,如下图,因此可通过这个方法快速找到需要操作的动画层,进一步简化代码:
小结
Lottie的缺点在于若在AE动画制作的过程不注意规范,会导致数据文件大、耗内存和性能的问题;Lottie-web的官方文档不够详尽,例如assetsPath参数是在看源码的时候发现的;开放的API不够齐全,无法很灵活地控制动画层。
而优点也很明显,Lottie能帮助提高开发效率,精简代码,易于调试和维护;资源文件小,输出动画效果保真;跨平台——Android, iOS, Web和Windows通用。
总的来说,Lottie的引用可以替代传统的GIF和帧动画,灵活利用好提供的属性和方法可以控制动画的播放,但需注意规范设计和开发的流程,才可以更高效地完成动画的制作与调试。
关注公众号:【IVWEB社区】,每周推送精品技术周刊 。
周刊文章集合: weekly
团队开源项目: Feflow
前端实现炫酷动效_Lottie-前端实现AE动效相关推荐
- 【CSS3】CSS3动画——我离前端的炫酷又近了一步
[CSS3]CSS3动画--我离前端的炫酷又近了一步 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除! ...
- 【CSS3】CSS3动画——前端的炫酷
[CSS3]CSS3动画--前端的炫酷 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除!幸好我在,感谢 ...
- 【AE转场】1600+超级炫酷视频转场无缝过渡AE特效素材 V2.0
这是一款多用途的超级 这是一款多用途的超级炫酷视频转场无缝过渡AE特效模板素材下载 可以使用动态链接 After Effects 与 Adobe Premiere Pro 一起使用.还包括有关 ...
- 前端实现炫酷动效_最好的H5动效视频教程:HTML5炫酷动效案例
一个元素,动态的往往比静态的更能吸引人们的注意力,由此推之,一个操作界面,活泼的动效交互反馈将会给用户带来更好的操作体验和感知.小到APP的Loading动画,大到各大网站炫酷的H5运营页的展现,可以 ...
- 前端实现炫酷动效_web前端入门到实战:使用CSS创建一个炫酷的球体动画效果
一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子.有了Jade ...
- 前端实现炫酷动效_超级绚丽,20款前端动画特效,轰炸你的眼睛
前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用.本文主要介绍了一些基于 ...
- 前端实现炫酷动效_20个网页动效设计的炫酷神器
如今很多 UI 设计师不是正在做动效,就正在学着做动效. 动效现在已经无处不在了.有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上, ...
- 前端实现炫酷动效_12个炫酷实用的HTML5带发光动画
本文作者html5tricks,转载请注明出处 在网页设计中,很多元素都可以实现发光的动画效果,比如输入框.文字.进度条等等.这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩.今天我们 ...
- 魔法诗~~~一套基于Vue开发的实用、高端、炫酷的响应式前端网页!!!
魔法诗网页 源代码获取方式见文章结尾处 1.项目简介 魔法诗是一套基于前端开发框架 Vue3 开发的仅包含前端页面的响应式网站,此网页主要是通过静态的页面展示给用户一些炫酷的界面.无论是用在平时学校的 ...
- 前端利器——炫酷的CodePen
前言 众所周知,前端是一个很容易将自己的劳动成果呈现出来的一个职位,无论是写1行代码还是写100行代码,都可以通过页面来进行呈现,在工作中的劳作成果也是可以一眼就呈现给客户.用户的.比如一些精美的页面 ...
最新文章
- 合并代码还在用git merge吗?我们都用git rebase!
- NYOJ 590 相同的和
- springboot出现Requested bean is currently in creation: Is there an unresolvable circular reference?
- ORACLE查出表所有的触发器及触发器详细信息
- mysql数据库创建带-的数据库名
- 大数据时代了解一些问题
- 【Hive】压缩格式
- 机器学习算法(一): 基于逻辑回归的分类预测-Task01
- 2.技巧: 用 JAXM 发送和接收 SOAP 消息—Java API 使许多手工生成和发送消息方面必需的步骤自动化...
- 大学生创新创业大赛案例_大学生创新创业典型案例4
- 《具体数学》部分习题解答1
- Linux 磁盘管理(RAID)--第五章
- 微服务架构-高性能Netty服务器-064:Netty实战与反序列化与序列化协议
- 【渝粤题库】陕西师范大学292311国际金融Ⅰ 作业(高起专)
- 1.CND技术详解---引言
- 中文翻译拉丁文转换_实时正则表达式(猪拉丁文翻译器)
- ECSHOP商城后台无法登陆
- Alpine linux 小内存版,Alpine Linux系统-Alpine Linux系统【轻量级Linux】下载v3.11.0 最新版-西西软件下载...
- 解决audio: Failed to create voice `goldfish_audio'错误
- 易學으로 본 鬼神問題 鬼神의 有無