前端动画实现笔记 参加字节跳动的青训营时个人写的笔记。这部分是蒋翔老师讲的课。 动画：动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。...快速 连续排列 彼此差异极小 制造错觉 动画都需要定义两个基本状态，即起始状态和结束状态，然后填补两者之间的空白，让动画连贯。 空白的补全方法有两种： 补间动画：传统动画。...动画在每一动画周期中执行的节奏 animation-delay：动画延时播放 animation-iteration-count：动画在结束前运行的次数，可以是 1 次，也可以是无限循环 animation-direction...：动画是否反向播放 animation-play-state：定义一个动画是否运行或暂停 1.1 translate(移动) 定义元素的平移变换。...SVG 动画 SVG 是基于 XML 的矢量图形描述语言，可以和 CSS、JS 很好的配合。
缺点：Chrome 59 之后，只有 IE 不支持 APNG 的制作：http://littlesvr.ca/apng/ 六、Javascript + SVG SVG 的动画元素是和 SMIL 开发组合作开发的...> 元素 此元素没有动画效果,可以在特定时间之后修改某个属性值（也可以是 CSS 属性值） svg width="320" height="320" xmlns="http://www.w3...暂停和播放 // svg指当前svg DOM元素 // 暂停 svg.pauseAnimations(); // 重启动 svg.unpauseAnimations(); 关于 svg 的之后再写文章详细介绍吧...之后再写详细的文章研究。Canvas 主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过 javascript 来渲染控制动画的执行。...知道的就这些了，之后再补充吧。 [完]
相关实践：动画资源、工作实践、动画的优化 # 前端动画实现 - 笔记 # 动画的基本原理 # 什么是动画 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。...快速、连续排列、彼此差异极小、制造错觉 # 动画的历史 如今前端动画技术已经普及 常见的前端动画技术 Sprite 动画、CSS 动画、JS 动画、SVG 动画和 WebGL 动画 按应用分类...采用硬件加速 (GPU) 简单的控制 keyframe animation 播放和暂停。...缺点：不能动态修改或定义动画内容不同的动画无法实现同步多个动画彼此无法堆叠。 适用场景：简单的 h5 活动 / 宣传页。 推荐库：animation.css、shake.css 等。...CSS 很难做到两个以上的状态转化（要么使用关键帧，要么需要多个动画延时触发，再想到要对动画循环播放或暂停倒序等，复杂度极高）。
做出来的动画可以导出为json文件，bodymovin就是这个动画json文件的前端播放器，支持渲染为svg\canvas\html三种格式。...它不仅可以播放动画，可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。...: document.getElementById('bodymovin'), animType: 'svg', //svg/canvas/html loop: false, //...bodymovin.loadAnimation(animData); 控制动画窗口的大小 bodymovin会将对应的svg或者canvas节点插入容器节点中。...~104帧，之后如果loop:true的话，会循环播放最后一个片段，即循环播放100~104帧 anim.playSegments([1,4], true); //结束当前片段的播放，立即播放1~4帧
作为一款K12青少年教育产品软件，动画对于吸引其用户注意力和提高用户体验有着重要的作用。特别是在目前开放了小学教育内容之后，动画能力的丰富和完善更是迫在眉睫。...在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。 ? 下面是lottie提供的官方效果图。...lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果； 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有...play: 播放动画 stop: 停止播放动画 pause: 暂停动画 goToAndStop: 跳到某一帧动画，并停止 setDirection: 设置播放方向 setSpeed: 设置播放速度 才外...，lottie-web也提供了一系列的事件，例如： onComplete: 动画播放完成触发 onLoopComplete: 当前循环播放完成触发 onEnterFrame: 播放一帧动画的时候触发 onSegmentStart
2、动画的其他属性 animation-iteration-count：设置动画的播放次数，默认为1次 animation-direction：设置交替动画 animation-delay：设置动画的延迟...animation-fill-mode：设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态 animation-timing-function：动画的时间函数（动画的效果，平滑？...先快后慢等） animation-play-state：设置动画的播放状态 paused:暂停 running:播放 /*3.设置动画的播放次数，默认为1次 可以指定具体的数值，也可以指定infinite...5.设置动画的延迟*/ animation-delay: 2s; /*5.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态 forwards:会保留动画结束时的状态，在有延迟的情况下，...下载下来之后，把下在下来的所有文件导入自己的项目，注意路径的匹配问题。 之后在我们css样式里面使用@font-face关键字来自定义 Web 字体。
window.bodymovin) { this.animation = window.bodymovin.loadAnimation({ container: this.box, renderer: 'svg...一般情况下，我们只需要svg格式的动画，所以可以使用lottie_light版本（仅支持svg渲染）。...元素 renderer: 'svg', // 渲染方式，svg、canvas、html（轻量版仅svg渲染） loop: true, // 是否循环播放 autoplay: true, //...是否自动播放 path: animateJsonPath, // 动画json文件路径 }); lottie-web常用方法 lottie-web提供了很多的控制动画播放的方法，下面是一些常用的方法...animation.play(); // 播放该动画，从目前停止的帧开始播放 animation.stop(); // 停止播放该动画，回到第0帧 animation.pause(); // 暂停该动画
，给加个0.1） 那么，为什么一幅画完成之后还要临摹几遍呢？...加载动画资源，并控制动画播放/暂停等 AE插件部分负责把AE的动画定义转换成Lottie动画定义，并输出JSON文件，难点在于支持转换更多的AE特性，以免设计师用起来束手束脚 播放器部分负责解析Lottie...动画定义，加载相关资源并利用平台支持的技术实现动画效果，比如Web环境下默认通过SVG动画来实现，可选Canvas绘制和CSS动画实现 关键在于： 通用的动画定义 各平台下支持该动画定义的播放器 类似于...: 'svg'），另外还支持canvas和html，区别在于： svg：动画元素（形状等）用SVG实现，动画效果通过SVG动画来做 canvas：通过元素用Canvas绘制，动画效果通过rAF定时刷新重绘来实现...html：动画元素用SVG实现，动画效果通过CSS动画来做 实际使用中发现，SVG模式兼容性最好，HTML模式下遮罩动画存在圆角放大变方的问题 P.S.关于SVG及其动画，请查看SVG基础知识 P.S
设计师在 After Effects 中，利用 Bodymovin 插件把动画导出为 JSON 格式之后，开发者就能够通过相应平台的 SDK 进行播放。...renderer：可以选择是使用 svg 还是 canvas 渲染动画。 loop: 是否循环播放，由于此处是在表情选择弹出层中预览动画，所以支持循环播放。...800 毫秒之后再执行，目的是在炸弹表情播放到合适的时间时，再播放全屏动画，播放动画使用了 playExplosion() 函数，并传递了消息元素进去。...在爆炸全屏动画结束之后，调用 shakeMessages() 来晃动消息。...之后给 lottie 实例设置事件监听：”complete”，它会在动画执行完成时触发，里边销毁了 lottie 实例和全屏动画元素。 这样全屏动画的效果就实现了。
（3）SVG动画 SVG技术越来越不陌生，使用门槛也渐渐降低，而且SVG动画还可以使用CSS控制。 先看个生日页面，是个SVG的蛋糕： ? （查看DEMO） 可见SVG是很强大的！...然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3比较难实现，这里可以用SVG，看图： ?...这里有个问题，IOS是不能自动播放音乐的，一定要触发一个用户交互事件，例如点击。...但是有一种hack的方法可以让IOS微信侧页面自动播放（SAFARI依旧无效）： 通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom...====最后总结==== 这是空间5.0预约页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，首屏星球重力感应，音乐（这里使用开启按钮后播放）等等。
矢量图形VectorDrawable 与水波图形RippleDrawable一样，矢量图形VectorDrawable也是Android5.0之后新增的图形类。...这便是SVG标记的大概格式，万变不离其宗，掌握了规律学得更好更快。详细的SVG标记定义说明如下： 移动画笔 “M x0,y0”把画笔移动到坐标点(x0,y0)。...start : 开始播放动画。 stop : 停止播放。 reverse : 倒过来播放。 再看看如何通过属性动画实现矢量动画效果。...所以要想让圆圈动画和打勾动画按顺序播放，得分别定义圆圈的矢量图形和打勾的矢量图形，然后等圆圈动画播放完毕，再开始播放打勾动画。...，接着播放打勾动画，这要在代码中控制，具体的是调用AnimatedVectorDrawable对象的registerAnimationCallback方法，一旦监听到原动画播放结束，然后开始播放新动画。
隧道动画与右边滑动动画要保持一致，当隧道最后一节起来之后，在隧道口展开出一条路。 教研团队代表动画： ? 这里主要展示9位企鹅辅导教研团队的教师代表。...video 动画效果也可以通过视频来实现，采用视频的方式，甚至还能调节动画播放的进度，不像动图一样只能自动播放。 而且video元素默认是不显示控制条的，这对于播放动画来说简直是完美的。...lottie-web库会去解析json文件的内容，根据json文件里面的动画信息，用svg或者canvas的方式去实现动画。...并且由于svg是矢量图，所以动画效果不会因为分辨率大小的原因而产生失真。 当然，lottie也有其缺点，就是对于一些动画效果，lottie无法完全还原。...总结 品牌页需求的动画，感觉已经将常用实现动画效果的方法都覆盖到了，当然应该还有其他的方法，比如直接采用canvas和svg来写动画。
还是一起来看看都有哪些项目上榜吧： 1 anime https://github.com/juliangarnier/anime Star 29019 Anime 是一个灵活且轻量级的 JavaScript 动画库...和 CSS，独立变换，SVG，DOM 属性和 JS 对象配合使用。...具有以下特性： 具体的动画参数 具体的目标值 多个定时值 播放控制 运动路径 2 vue https://github.com/vuejs/vue Star 126700 Vue.js 是构建 Web...5 nuclear https://github.com/nukeop/nuclear Star 3703 nuclear是一个免费的音乐流媒体播放器，可以从youtube搜索和播放音乐，支持本地文件：...react Star 12129 React是Facebook开发的用于构建用户界面的JavaScript库，现已为很多公司所用，因为它采用了一种不同的方式来构建应用：借助于React，开发者可以将应用分解为彼此解耦的独立组件
anim = lottie.loadAnimation({ container: document.getElementById('anim-container'), renderer: 'svg...Curated Motion Designs 核心语法很简单，去LottieFiles网站下载对应的JSON文件并安装lottie-web之后，直接按如下的方式引入即可： // 基础初始化...(svg/canvas/html) loop: true, // 循环设置 autoplay: false, // 自动播放 path: 'data.json...' // JSON路径 }); // 事件监听 anim.addEventListener('complete', () => { console.log('动画播放完成'); });...// 播放控制 anim.play(); anim.pause(); anim.stop(); 3、性能优化技巧 实现视口可见时播放，提升页面性能评分。
：动画次数，无限循环 infiniteanimation-direction：设置是否可以反向播放动画animation-fill-mode：设置 CSS 动画在执行之前和之后如何将样式应用于其目标，一般用来解决动画停止后界面闪现问题...css 的动画效果也都是可以直接作用在 svg 元素上的。...除此之外，SVG 中也自带 animate 元素，可以直接用来创建动画，css 中的动画效果也都能用其实现，相比 css 动画 svg 可以实现出更加复杂的动画效果，如路径动画、描边动画等，很多网站的...logo 动画就是用 svg 来实现的。...flash 动画flash 动画是一种基于 Adobe Flash 技术创建的动态图像或影片，它可以在网页中播放。
下面开始： 在 sketch 中确保要导出的内容已经群组为一个 group 将这个 group 导出为 svg 在 AI 中打开 svg，并转存为 .ai 文件 将 .ai 文件导入到 AE 中...’ / ‘canvas’ / ‘html’，个人测试发现 svg 效果和兼容性最好 name 动画名称，用于 reference loop 循环 autoplay 自动播放 path json 路径，页面会通过一个...获取到 lottie 实例后，可以调用 api 控制动画，例如上述代码中可以使用 myLottie.pause() 相关 api 名称 参数 描述 stop 无 停止动画 play 无 播放动画 pause...无 暂停 setSpeed Number 设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度 setDirection Number 正反向播放，1 表示 正向，-1 表示反向 goToAndStop...，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成 destroy 无 销毁 事件 onComplete onLoopComplete onEnterFrame
（3）SVG动画 SVG技术越来越不陌生，使用门槛也渐渐降低，而且SVG动画还可以使用CSS控制。 先看个生日页面，是个SVG的蛋糕： ? ?...然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3比较难实现，这里可以用SVG，看图： ?...这里有个问题，IOS是不能自动播放音乐的，一定要触发一个用户交互事件，例如点击。...但是有一种hack的方法可以让IOS微信侧页面自动播放（SAFARI依旧无效）： 通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom...这是空间5.0预约页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，首屏星球重力感应，音乐（这里使用开启按钮后播放）等等。
实现（2）补间动画(Tween动画\关键帧动画)CSS实现（transition、animation等）使用一些缓动函数JS实现（3）SVG动画使用 XML 格式定义图形可以用AI等SVG编辑工具生成SVG...所以逐帧动画的实现核心是什么，就是将我们的这些静态的图片进行快速的循环播放，形成了一个动态的动画效果。这就是帧动画。...(number_of_steps, direction) 来实现逐帧动画的连续播放。...playback control，播放，暂停，重新启动，搜索动画或时间线。...Pixi使用和 canvas Drawing几乎一致的 api，但不同于 canvas 的绘画 api，使用 Pixi 绘制的图形是通过 WebGL 在 GPU 上渲染还有一系列特性需要在学习PixiJs之后了解优点
5 视频 有很多应用的引导界面是直接播放的视频，特别是一些大型的游戏，反编译它的代码可以看到，就是一个视频文件。视频文件在分辨率适配上会比较麻烦，制作成本也比较大。...6 SVG SVG是可缩放矢量图形，他是基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。...SVG格式具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在SVG图像中保留可编辑和可搜寻的状态;平均来讲，SVG文件比其它格式的图像文件要小很多...关于SVG更为详细的介绍可以参考这篇文章：Android实现炫酷SVG动画效果。...2 使用动画过程中遇到过哪些坑 在有动画效果的界面，强烈建议不要关掉硬件加速，在没有硬件加速的环境下运行动画效果会显得不流畅； 动画（特别是循环播放的动画）效果功耗很大（因为CPU和GPU在高负荷持续工作呀
JS-Driven Animation 经过市场调研综合结果之后，我们最终还是选择自己“造轮子”。因为我们希望可以是自己控制的，不用担心被别人起诉，也不担心新功能无法在它的基础上进行扩展。...比如动画“火山升起”的时候发来1秒的时间，第二个动画“火焰柱喷发”是在“火山升起”结束后开始播放。这时就可知它的延迟时间是1秒，“岩浆流动”同时播放也是1秒。...到了“红包喷发”的时候就需要进行计算，前面的动画播放4秒后再播放“红包喷发”，它的延迟是1.4秒。如果这时“火山升起”的持续时间有所变动，那么后续的所有时间都要重新进行计算。...AFT路径动画 后来我们改用SVG的路径，无论需求方想要什么路径，只要找个SVG的制图软件导出路径节点就可以。这是我们后来对路径动画做的改变。...如果以后CSS的路径动画属性得到浏览器的支持，可以直接用原生的CSS路径动画，也支持SVG导出的路径，实现路径动画，AFT就要退出历史舞台了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
