写点什么

会写动画的前端才是好开发(一)

  • 2020-01-07
  • 本文字数:1349 字

    阅读完需:约 4 分钟

会写动画的前端才是好开发(一)

动画是通过把某一动态过程分解后,画成许多动作瞬间的画幅,再用摄影机连续拍摄成一系列画面,给视觉造成连续变化的图画。它的基本原理与电影、电视一样,都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性,人的眼睛看到一幅画或一个物体后,在 0.34 秒内不会消失。


利用这一原理,在一幅画还没有消失前播放下一幅画,就会给人造成一种流畅的视觉变化效果。相信很多人都看过动画片,或者手翻书,其实它们与电视、电影的原理都是一样的。



动画如何实现


  1. Javascript 直接实现动画;

  2. css3 动画中的 transition 和 animation;

  3. Canvas 动画;

  4. SVG(可伸缩矢量图形);

1. Javascript 直接实现动画

Javascript 直接实现动画,主要是通过 setInterval 或 setTimeout 方法的回调函数来持续调用改变某个元素的 CSS 样式以达到元素样式变化的效果,或者使用 requestAnimationFrame;


示例:



上面示例的效果是一个灰色的小方块,慢慢的从左边,移动到屏幕右边的动画,每隔 16ms 就把方块的左外边距增加 1px。尽管过程看起来很连贯,但是这种方法依然存在一些问题。


因为 JavaScript 是单线程的,setTimeout 是异步操作,加入任务队列后,当 js 引擎线程中同步代码执行完才会从任务队列中取出执行,可能发生阻塞。另外 setTimeOut 会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器,而且不同浏览器对 setTimeOut 的解析也是不同的,导致同一动画在不同浏览器下效果不一致,在移动端上使用会有明显的卡顿。


requestAnimationFrame 实现动画的优点是可以避免不必要的过度重绘,但是整体性能和可调节性都不如 css3 动画。

2. css3 实现动画

Transition


Transition 可以实现过渡动画的效果,但是 transition 并不能实现独立的动画,只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是马上改变。 transition 抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画,不支持自定义中间的状态。可以设置发生变化的 css 属性,默认为 all,则所有变化的属性都会在触发时,以动画的形式展现出来。如果把 transition 和 transform 配合使用,对元素进行平移、倾斜、缩放,使动画更加丰富生动。


transition 语法如下:


transition:property duration timing-function delay;


具体属性值介绍如下:



示例:



Animation


Animation 算是真正意义上的 CSS3 动画。使用 animation 属性制作动画可以更加灵活的设置动画,通过对关键帧及其状态以及循环次数的控制,页面元素会在对应的时间按照设定好的样式改变进行平滑过渡。不过区别于 Transition,Animation 作用于元素本身而不是样式属性,不局限于只有初始状态和结束状态,可以实现更自由的动画效果。


animation 语法如下:


animation: nameduration timing-function delay iteration-count direction;


具体属性值介绍如下:



关键帧定义:



示例:


大风车


华语群星 - 央视“启航 2016”跨年晚会



感兴趣的小伙伴请看这里(如无法打开,请复制链接到浏览器):


http://www.cnblogs.com/yingzi1028/p/7768595.html


使用 CSS3 transition 和 animation 实现动画,它最大的优势是摆脱了 js 的控制,并且能利用硬件加速以及实现复杂动画效果,但是会存在浏览器兼容性问题。


本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/iFs4d7XDcoLA3ZweWMpdwQ


2020-01-07 15:401190

评论

发布
暂无评论
发现更多内容

WorkPlus打造统一用户管理平台,实现企业用户管理的一体化

BeeWorks

什么是云电脑?

青椒云云电脑

云电脑

【效率提升】手把手教你如何使用免费的 Amazon Code Whisperer 提升开发效率堪比 GitHub Copilot 平替

亚马逊云科技 (Amazon Web Services)

虚拟云桌面和共享云桌面有啥区别

青椒云云电脑

云桌面

火热的低代码,是时候系统的来学一学了!

互联网工科生

低代码 应用开发 数字化工具

无障碍测试解读

QE_LAB

无障碍 测试技术干货 测试技术

云桌面GPU技术方案

青椒云云电脑

图形工作站

高性能存储 SIG 月度动态:erofs 新增支持多个重要特性,持续构建容器场景竞争力

OpenAnolis小助手

开源 容器 高性能存储 龙蜥社区 sig

私有化部署即时通讯平台,完美替代飞书和钉钉的SaaS系统

BeeWorks

WorkPlus——高效私有化办公平台,实现即时协作与信息安全的完美结合

BeeWorks

不同构架云桌面的部署风险

青椒云云电脑

云桌面 青椒云云桌面

如何实现虚拟云桌面?

青椒云云电脑

桌面云 云桌面

虚拟云桌面在实验教学中的应用与实践

青椒云云电脑

桌面云 云桌面

五点告诉我们云教室比传统机房好

青椒云云电脑

云教室

云桌面应用下的数据防护新思路

青椒云云电脑

云桌面

性能最佳实践

FunTester

海外运营视频直播App,服务器放在哪?

山东布谷科技胡月

语音聊天APP源码 国际版语音直播APP 交友软件开发 海外直播App开发 直播交友源码

业务喜报丨九科信息成功签约四川中烟工业有限责任公司成都卷烟厂RPA项目

九科Ninetech

RPA RPAxAI

云桌面跟PC相比能有哪些不一样的体验?

青椒云云电脑

桌面云 云桌面

影响云桌面性能的三个重要因素是什么?

青椒云云电脑

云桌面

八种十倍提升API性能的方式

树上有只程序猿

数据库 服务器 API 接口

腾讯云TDSQL- C Serverless 2.0版发布,多项核心技术首次公开解析

极客天地

使用云电脑9条注意事项

青椒云云电脑

云电脑

祝贺!Databend Cloud 入驻 AWS 云市场

Databend

WorkPlus Meet白板和文档共享功能上线,私有化视频会议全新升级

BeeWorks

云桌面在教学中的应用

青椒云云电脑

云桌面

LeetCode题解:7. 整数反转,迭代,JavaScript,详细注释

Lee Chen

JavaScript LeetCode

不同构架云桌面的部署风险

青椒云云电脑

云桌面

会写动画的前端才是好开发(一)_语言 & 开发_Think体验设计_InfoQ精选文章