QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

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

评论

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

如何在 Rocky Linux 上安装 Apache Kafka?

wljslmz

Apache kafka 11月月更

一文详解GaussDB(DWS) 的并发管控和内存管控

华为云开发者联盟

大数据 后端 华为云

集世界杯+GameFi元素的MetaElfLand,推出世界杯专场活动

小哈区块

前端自学能学会吗,培训怎么学

小谷哥

万恶的strpos函数

J.Smile

自学php

如何将项目经理负责制落到实处?完成这3个前置条件!

PMO实践

项目管理 PMO 项目经理

进场感知,主动服务|诚迈联手华为打造HarmonyOS原子化服务解决方案

最新动态

BANI时代下PMO如何求得生存?

PMO实践

项目管理 PMO 2022

MemArts :高效解决存算分离架构中数据访问的组件

华为云开发者联盟

云计算 后端 华为云

Serverless Devs 社区联合信通院邀请您参加 2022 中国 Serverless 用户调查

阿里巴巴云原生

阿里云 Serverless 云原生

OneFlow-ONNX v0.6.0正式发布

OneFlow

人工智能 深度学习

Stable Diffusion半秒出图;VLIW的前世今生;YOLOv5全面解析教程 | AI系统前沿动态

OneFlow

人工智能 深度学习 VLIW

【保姆级】github博客快速搭建

Shen-Xmas

GitHub 前端 后端 博客 博客搭建

Amazon Braket 与量子计算

亚马逊云科技 (Amazon Web Services)

量子计算 Hero 专栏 Amazon Braket

PMO推行制度落地陷入困境怎么办?

PMO实践

项目管理 PMO 项目经理

如何通过 NFTScan 浏览器查询 NFT项目的 Metadata 数据【教程】

NFT Research

区块链 NFT

云小课|帮您高效快速上传组件至私有依赖库

华为云开发者联盟

云计算 后端 华为云

在大数据培训学习中怎么成为优秀的程序员

小谷哥

哪些人适合参加前端培训?

小谷哥

怎么判断自己适不适合做大数据培训

小谷哥

学历低可以参加大数据培训吗

小谷哥

【论文复现】Panoptic Deeplab(全景分割PyTorch)

华为云开发者联盟

人工智能 华为云 论文复现

集世界杯+GameFi元素的MetaElfLand,为何将在世界杯期间爆发?

股市老人

助力双12,Quick Stock-瓴羊交易9.9元畅享打单发货

瓴羊企业智能服务

元器件科普 | 无源元件之——电容基础知识(超详细)

元器件秋姐

元器件采购 华秋商城 电容 电容器 电解电容器

年终最重磅!云原生实时数仓 SelectDB 首次产品发布等你来约!

SelectDB

数据库 云计算 大数据 实时计算

大规模 Spring Cloud 微服务无损上下线探索与实践

阿里巴巴云原生

阿里云 微服务 云原生 Spring Cloud

如何写出一份“有结果”的年度工作总结【超极实用!】

PMO实践

项目管理 PMO 项目经理 工作总结

企业数字化转型中面临的开源供应链的挑战及应对措施

安势信息

开源 企业数字化转型 开源软件供应链 软件供应链安全 安势信息

云原生系列 二【轻松入门容器基础操作】

叶秋学长

云原生 沙箱实验 11月月更

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