写点什么

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

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

评论

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

产品开发的过程

Qien Z.

运营管理 6月日更

JAVA笔记(一)--软件安装-MyEclipse

加百利

Java 6月日更

🍃【SpringBoot技术专题】「StateMachine」FSM状态机设计及实现

码界西柚

springboot 6月日更 状态机 StateMachine

「SQL数据分析系列」2. 创建和使用数据库

Databri_AI

数据库 语法

ES2021 带来的新特性

KooFE

JavaScript 6月日更 ES2021

nacos配置中心模块详解

捉虫大师

nacos 配置中心

架构实战营-模块一作业

rubys_

架构实战营

☕【JVM技术探索】重塑虚拟机性能调优计划

码界西柚

JVM jvm调优 GC调优 6月日更

《原则》(十三)

Changing Lin

6月日更

CSS 选择器总结

编程三昧

CSS html5 大前端 DIV+CSS CSS选择器

从零开始搭建一个个人博客网站--Task0

IT蜗壳-Tango

django IT蜗壳教学 6月日更 Datawhale

JavaScript学习(二)

空城机

JavaScript 大前端 6月日更

2020年度编程语言排行榜 C语言称霸,Java遭遇滑铁卢?

架构精进之路

编程语言 6月日更

我在Dubbo源码里学到了如何保证虚拟节点均匀分布!

Kareza

dubbo dubbo源码

常用消息队列对比

看山

MQ 6月日更

浅浅谈Redux

蛋先生DX

React Redux 6月日更

模块6作业

薛定谔的指南针

架构实战营

【经验分享】RTC 技术系列之视频编解码

Hanson

音视频

算法之统计岛屿数量

Skysper

算法 深度优先搜索

新手讲解this

前端树洞

JavaScript 面试 大前端 js

Kubernetes手记(10)- POD 存储卷

雪雷

k8s 6月日更

(VMware)ubuntu 环境下搭建docker环境

逸少

Docker Docker-compose vmware Ubuntu20.04

【Vue2.x 源码学习】第十三篇 - 生成 ast 语法树 - 正则说明

Brave

源码 vue2 6月日更

拆分电商系统为微服务

chenmin

setInterval 和 hooks 撞在一起,翻车了~

Viktor

踩坑经历 React Hooks

架构实战营模块6作业

梦寐凯旋

#架构实战营

这可能是介绍Android UvcCamera最详细的文章了

小驰笔记

android 音视频 UvcCamera 引航计划

【21-6】PushGateway快速上手

耳东@Erdong

Prometheus 6月日更 PushGateway

LeetCode 每日一题「判定字符是否唯一」

陈皮的JavaLib

Java 算法 LeetCode

网络攻防学习笔记 Day44

穿过生命散发芬芳

网络攻防 6月日更

[译] Android 的 Java 8 支持

Antway

6月日更

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