限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

  • 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:401205

评论

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

有奖活动 | 以代码之名,写出对Ta的爱

HarmonyOS开发者

HarmonyOS

死锁产生的条件及解决方法

红袖添香

Java 多线程 死锁

电脑硬件迭代快,对仿真软件有什么影响?

智造软件

仿真软件 电脑硬件 结构仿真 电脑配置 硬件配置

华为云GaussDB打造最可信的数据库,给世界一个更优选择

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 8 月 PK 榜

生成式AI:全球科技革命的驱动力

百度开发者中心

教育 #人工智能 ChatGPT 生成式AI

《守望先锋 2》性能提升高达33%!英特尔锐炫从未止步

E科讯

在数字化时代的挑战与解决:跨国大文件传输方法

镭速

大文件跨国传输 跨国快速传输大文件

技术领先的用友iuap平台,助力升级数智化底座、驾驭数智未来

用友BIP

2023全球商业创新大会

生成式AI:内容创作新革命

百度开发者中心

自然语言处理 内容 #人工智能 文心一言

生成式AI引领未来传媒业发展趋势

百度开发者中心

媒体 #人工智能 生成式AI 文心一言

和鲸 × 临床医学丨“人”作为一生命体在 AI for Science 过程中的作用与交互

ModelWhale

数据科学 临床医学 AI for Science 交叉学科 临床研究

企业国际大数据传输必须了解的5种跨国快速传输大文件工具

镭速

大文件传输 跨国传输大数据

分布式数据库架构:高可用、高性能的数据存储

互联网工科生

分布式数据库 高性能 高可用性

头脑风暴小工具-影响地图

Bruce Talk

敏捷开发 Agile Product Owner 影响地图

生成式AI助力智能未来

百度开发者中心

#人工智能 ChatGPT 生成式AI 文心一言

低成本生成式AI技术:推动AI普及的关键

百度开发者中心

医疗 #人工智能 ChatGPT 文心一言

加入DevRun软件开发流水线实战营,即刻开启你的职场竞争力之旅!

科技热闻

第三周作业

大肚皮狒狒

​Elastic Stack最佳实践系列:Beats->ES,一个更轻型的架构选择

腾讯云大数据

ES

ETL 小技巧:文件输出插件数据写入空闲时间阈值配置及作用

大河

缓冲区 ETL bboss 文件输出

生成式AI助力高效写作

百度开发者中心

大模型 #人工智能 ChatGPT 生成式AI

又一可视化低代码神器!云耀云服务器L实例正式发布

mecchi

软件开发 云主机 云服务器 博客搭建

软件测试|如何使用ChatGPT生成思维导图

霍格沃兹测试开发学社

用案例带你认识决策树,解锁洞察力

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 8 月 PK 榜

生成式AI技术市场现状与发展前景展望

百度开发者中心

#人工智能 生成式AI 文心一言

Easysearch 跨集群复制实战

极限实验室

easysearch

软件测试|人工智能如何帮助测试工程师解决问题?

霍格沃兹测试开发学社

社交语聊平台运营,需要哪些资质?语聊APP原生开发和混合uniapp开发的利弊分析

山东布谷科技胡月

语音聊天系统软件开发 语音直播平台开发 语音聊天室开发 语音程序源码 社交直播APP开发

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