写点什么

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

  • 2020-01-07
  • 本文字数:1244 字

    阅读完需:约 4 分钟

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

3. canvas 动画

canvas 作为 H5 新增元素,是页面图形绘制的容器,借助 Web API 来实现动画的。通过 getContext()获取元素的绘制对象,通过 clearRect 不断清空画布并在新的位置上使用 fillStyle 绘制新矩形内容实现页面动画效果。


示例:(请点击图片查看大图)



上面的例子画出了一幅 1000*600,淡蓝色背景有动态下雪效果的图片,其中一帧如下图所示:



canvas 的主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过 javascript 来渲染控制动画的执行,可用于实现较复杂动画。同样都是使用编码的方式由前端开发工程师完成动画效果,canvas 要比原生 js 效率高的多,流畅的多能够轻松的实现更多的动画效果。


canvas 的缺点是没有提供为其内部元素添加事件监听的方法,需要自己动手实现,使其内部元素能够响应事件。首先获得鼠标在 canvas 上的坐标,计算当前坐标在哪些元素内部,然后对元素进行相应的操作。配合自定义事件,我们就可以实现为 canvas 内的元素添加事件监听的效果。

4. SVG 动画

SVG 用来定义用于网络的基于矢量的图形,其使用 XML 格式定义图像,由 SVG 元素内部的元素属性控制。Svg 不依赖分辨率,基于矢量图,支持事件处理,最适合带有大型渲染区域的应用程序。


示例:(请点击图片查看大图)



上面的例子实现的是一个跳动的心的动图,其中一帧如下图所示:


想看动图的小伙伴请看这里(如无法打开,请复制链接到浏览器):


https://code.h5jun.com/kul


SVG 的一大优势是含有较为丰富的动画功能,原生绘制各种图形、滤镜和动画,并且能被 js 调用。


但是,另一方面元素较多且复杂的动画使用 svg 渲染会比较慢,CSS3 动画的出现让 svg 的应用变得相对少了。


感兴趣的小伙伴请戳这里(如无法打开,请复制链接到浏览器):https://segmentfault.com/a/1190000008215226


另外,还有在不同框架下,也都有自己实现动画的方法,例如 jQuery 中的 show、slide、fade 以及 animate 方法,或者 angularJs 中的 ngAnimate 通过添加或移除 class,使用预定义的样式类来设置 HTML 元素的动画,或者 animate()方法, 在组件对应的模板上直接加动效,AnimationBuilder, 在自定义指令中给宿主元素加动效。


看到这里大家一定很疑惑,既然实现动效的方法有那么多种,那么对于组件来说,应该如何做选择?


这就要结合组件来看了,首先使用 css3 中 animation 和 transition 实现,这种实现方式除了 IE9 及其以下版本不兼容之外,其他浏览器之下都有很好的兼容性。这种实现方式能够将组件样式与组件动画分离开展示,非常有利于后期维护,对国际化和换肤也是十分友好的。


然后根据情况选择 angular 的 ngAnimate 或者 jQuery 中的.animate()方法,因为这两种方法的使用都是有前提和限制的,并不能实现左右的动画效果。



最后,如果以上方法还不能满足你的需求,那就只能使用 JavaScript 中的 setInterval 和 setTimeOut 方法实现了,在定时器中不断修改某个样式的值,直到达到临界值,实现动画。


本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/iFs4d7XDcoLA3ZweWMpdwQ


2020-01-07 15:401180

评论

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

【LeetCode】最短补全词Java题解

Albert

算法 LeetCode 12月日更

Linux运维,Linux系统学习

侠盗安全

Linux linux运维 运维工程师 云计算架构师

全链路数据血缘在满帮的实践

华为云开发者联盟

sql 图数据库 图计算 全链路数据血缘 数据血缘

从 0-15 套存储集群,YRCloudFile 助力 AI 训练效率“超线性增长”

焱融科技

人工智能 云计算 分布式 高性能 文件存储

双 11 大促会场开发提效解析:前端智能化落地实践

凹凸实验室

机器学习 大前端 智能代码

从0到1教你如何使用 p5.js 绘制简单的动画

海拥(haiyong.site)

大前端 动画 28天写作 签约计划第二季 12月日更

大厂面试算法题之数组

程序员学长

数据结构 算法 大厂面试

DataPipeline与TiDB推出异构数据实时同步解决方案,共筑安全可信基础设施

DataPipeline数见科技

数据库 大数据 中间件 数据融合 数据管理

面试官:你是怎样理解Fiber的

全栈潇晨

React react fiber

react源码解析6.legacy模式和concurrent模式

buchila11

React

前端开发:npm run serve和npm run dev的区别

三掌柜

28天写作 21天挑战 12月日更

SAP Spartacus Session affinity

汪子熙

后端 28天写作 12月日更 Spartacus 会话

让工具成为双手的延伸

Zilliz

数据库 书籍推荐 程序 书籍

数据库事务的三个元问题

Zilliz

数据库 数据库设计

为啥你写的代码老有大串的if/else?

华为云开发者联盟

代码 if for循环 else

安全办公 |企业级IM即时通讯私有云解决方案

BeeWorks

进程崩溃/应用卡死,故障频频怎么办?|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

这套神奇的个人信息管理系统,带我一步步进入互联网大厂

博文视点Broadview

Android C++系列:Linux网络(三)协议格式

轻口味

c++ android 28天写作 12月日更

react源码解析3.react源码架构

buchila11

React react fiber

Flutter 自定义 ACEFoldTextView 折叠文本

阿策小和尚

28天写作 0 基础学习 Flutter 内容合集 签约计划第二季 12月日更

Go语言学习查缺补漏ing Day7

恒生LIGHT云社区

golang Go 语言 编程语言‘

CANN5.0黑科技解密 | 高并发图片视频处理,为出行保驾,为生活添彩!

华为云开发者联盟

高并发 图像预处理 CANN 昇腾 异构计算

前端性能优化 24 条建议

编程江湖

大前端

高并发多方案秒杀架构

MetaThoughts

Redis(一):单线程为何还能这么快?

IT巅峰技术

redis 分布式 架构师 分布式缓存 Java Redis

Java 程序员必须掌握的 10 款开源工具

编程江湖

java编程 java开发工具

科创人·StreamNative翟佳:开源模式价值为王,基础软件的未来在国内社区

科创人

如期而至-用户购买时间预测(下)

索信达控股

模型 购买预测 购买行为 精准营销

Java开发之环境搭建基础教程

@零度

Java 开发环境搭建

一文读懂 Apache Pulsar

了凡跨境洞察

云原生 Apache Pulsar 消息系统 数据流 Apache Pulsar 社区

会写动画的前端才是好开发(二)_文化 & 方法_Think体验设计_InfoQ精选文章