70+专家分享实战经验,2024年度AI最佳实践都在AICon北京 了解详情
写点什么

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

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

评论

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

程序员开发指南!1-3年的Android开发工程师看过来,经典好文

欢喜学安卓

android 程序员 面试 移动开发

为新基建按下加速键:从openEuler看中国操作系统的产业生态未来

脑极体

SpringBoot系列(7)- 自动装配

引花眠

springboot

如何通过一个SDK轻松搞定人脸识别,拯救初入职场的程序猿

华为云开发者联盟

人脸识别 智能 识别

浅谈如何做客户端性能测试

行者AI

性能测试

圣诞狂欢,保险师APP赋能精细、个性化的运营服务

DT极客

腾讯大牛亲自带你学:Java安全weblogic T3协议漏洞!

比伯

Java 编程 架构 面试 计算机

业务架构设计迭代演进思路

程序员架构进阶

架构 中台 业务架构

ZooX首发双向电动无人车,会成为自动驾驶出行的主流吗?

脑极体

智慧平安小区整体解决方案,智慧社区管控系统开发

13530558032

区块链食品溯源系统开发,农产品溯源小程序搭建

13530558032

这份阿里P8级别内部疯传的“Linux私房菜”让你一次吃个饱

Java架构之路

Java 程序员 架构 面试 编程语言

Java程序员晋升之路:“Java高级核心知识全面解析”

Java架构之路

Java 程序员 架构 面试 编程语言

ARTS打卡 第28周

引花眠

微服务 ARTS 打卡计划 springboot

阿里“云钉一体”加速整合 低代码开发平台“钉钉宜搭”发布

人称T客

工具词典:精力管理

lidaobing

精力管理 张遇升 28天写作

窝家恶补三月,字节跳动三面,终于喜提offer!分享面试感受

Java架构之路

Java 程序员 架构 面试 编程语言

从根上理解高性能、高并发(二):深入操作系统,理解I/O与零拷贝技术

JackJiang

网络编程 高并发 高性能 即时通讯

道高一丈,且看CWE4.2的新特性

华为云开发者联盟

技术 安全 漏洞

Alibaba面试官:“这该死的程序员,知识竟如此渊博!”

Java架构之路

Java 程序员 架构 面试 编程语言

ModelArts黑科技揭秘|弹性训练,让训练资源张弛有度

华为云开发者联盟

学习 华为云

字节面试坎坷之路,第一次二面凉了!捞起来之后一面就凉了;我太难了呀!

Java架构之路

Java 程序员 架构 面试 编程语言

大佬带你看源码!阿里内部Android笔记火爆IT圈,3面直接拿到offer

欢喜学安卓

android 程序员 面试 移动开发

(经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路

Java鱼仔

Java 程序员 面试 大学生

3D 可视化突发公共卫生事件 ,防护效率高达90%

一只数据鲸鱼

疫情 物联网 数据可视化 数据监测 3D可视化

利用文字技术帮助选购商品,慧眼“识”物的人都这样做……

华为云开发者联盟

文字识别 智能 识别

软件测试所需要掌握的技能

测试人生路

软件测试

CEG挖矿系统APP开发|CEG挖矿软件开发

系统开发

LeetCode题解:剑指 Offer 40. 最小的k个数,sort,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

第八课性能优化作业-判断合并链表

Geek_michael

极客大学架构师训练营

阿里P8大牛手把手教你!高级Android晋升之View渲染机制,先收藏了

欢喜学安卓

android 程序员 面试 移动开发

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