写点什么

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

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

评论

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

瓴羊X阿里云上的Salesforce联合解决方案正式发布

ToB行业头条

一物一码需求,标签制作功能轻松解决

草料二维码

二维码 二维码生成 标签制作 一物一码

海外IP代理rola-ip表现突出,全球覆盖面广,技术支持优秀

Geek_bf375d

8款好用的笔记软件,让你的读书笔记独一无二!

彭宏豪95

读书笔记 效率 软件推荐 在线白板 笔记软件

剑指数据结构—实现动态数组

少年游侠客

数据结构 数组 ArrayList Java’

Python 机器学习入门:数据集、数据类型和统计学

小万哥

Python 程序员 软件 后端 开发

Unity中国全面支持OpenHarmony游戏开发,多款游戏率先完成适配

最新动态

荣誉 | 观测云登榜「2023 中国好 SaaS TOP 10 SaaS 企业 」

观测云

可观测性 SaaS

“箭在弦上”的边缘计算,更需要冷静和智慧

脑极体

服务器

海外HTTP代理哪家最好用?Rola-IP与StormProxies的全方位数据对比

Geek_bf375d

哪些行业发展需要用到代理IP?罗拉ROLA-IP告诉你什么是专业

Geek_bf375d

ROLA-IP海外IP代理为第四届全球跨境电子商务大会注入活力

Geek_bf375d

云电脑与5G网络的结合将会带来什么

青椒云云电脑

云电脑

低代码工具的常见用例与受众市场

树上有只程序猿

低代码

Mac矢量图设计Sketch for Mac v99中文激活版 永久使用

Rose

sketch Mac Mac矢量图设计 Sketch 99新功能 Sketch 中文版下载

领跑同一阵营!百分点科技入选Forrester AI/ML权威报告

百分点科技技术团队

人工智能 数据科学 百分点科技

聊聊低代码技术

互联网工科生

软件开发 低代码

Mac 版截图工具链

Eric 老乌龟

macos 工具

销售易取得500强客户背后的实践与进化

B Impact

IP代理哪家好用? 必看经典文

Geek_bf375d

华为云开源 | 线下meetup · 电子科技大学站圆满收官

华为云开源

云原生 开源项目 开源社区

分布式AI在LLM时代的技术深度探索

不在线第一只蜗牛

人工智能 AI lee

投资机构Janus Capital Group为Rola-IP品牌融资700万美元

Geek_bf375d

Linux cat命令

芯动大师

Barcode for Mac:快速生成各类条形码

Rose

mac软件下载 条形码设计 Barcode for Mac Barcode 下载

【Data & AI Con Shanghai 2023】嘉宾专访|西电王皓:认清边界 大胆创新

白玉兰开源

人工智能 白玉兰开源

macOS 14 Sonoma 14.1.1正式版(最新苹果系统) pkg完整安装包

Rose

苹果系统 macOS 14 Sonoma Mac14系统

ps cc2019 Mac中文直装版v20.0.10 兼容M1

Rose

ps cc2019 Photoshop2019破解版 PS2019 Mac中文版下载

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