干货来袭!腾讯T4大佬,十分钟教你用svg做出精美的动画
前言
经常在Codepen上看到大侠们用SVG画出不可思议的动画,我一直很好奇他们是怎么运作的,总觉得这需要对SVG有足够透彻的了解,并且自己画出那些SVG图案,才有办法让他动起来。
但其实不然,今天教大家一个简单的小技巧,让你快速实现一个svg动画!
打开Codepen,点击界面中的build按钮,就可以使用动画构建一个房子,并且让它升起寥寥炊烟!
寻找精美的svg图案
既然自己画不出来,那我们就去找现成的库,svg库有很多,如Flaticon、iconfont、Iconfinder或icons8等网站会提供很多免费的svg图案。
分析svg图案
打开devtool观察 svg 图案,你会看到下面的结果:
element里头path跟circle都是svg的DOM元素,分别表示svg图案内的线条与圆形。
举个例子:
<path d="M 10 25L 10 75L 60 75L 10 25">
上面代码中的d的内容:M代表将笔移动到(10, 25),接着L画一条线到(10, 75),最后回到起点画出一个三角形。
通过devtool,我们可以看到每个path对应图案的哪个部分:
这时候应该形成思路,既然我们可以知道每个元素对应到图案的哪个部分,我们就可以针对想要套上动画的DOM 元素来操作!
TimelineLite/TimelineMax 工具
如果单纯通过id、className 来使用 CSS 或JavaScript 自行处理动画,难度还是颇高,更重要的是,要耗费大量的时间
所以我们得借用工具,Timeline(Lite|Max)跟TweenMax是知名的GreenSock Animation Platform(简称GSAP)推出的可创建时间轴(timeline)作为动画或其他时间轴的容器,这使得整个动画控制和精确管理时间变得简单。
GSAP甚至为我们提供了Ease Visualizer来展示每种Ease function的效果,更顺带附上代码:
简单几句代码就能达到如下效果:
上手GSAP
GSAP的API功能十分强大,还有相关社区:官网文档、论坛、TimelineMax中文手册
在一开始的房子构建中,我主要使用的是TimelineMax的from与staggerFrom,这两个API只需要设定初始值,他会在指定时间内将补间动画完成:
tl.from("#House > rect:nth-child(24)", 1, {scaleX: 0,transformOrigin: "center",ease: Power2.easeOut})
这一步我们将CSS Selector #House > rect:nth-child(24) 这个元素,从scaleX为0开始,以center(中心)为变形起点,利用Power2.easeOut,在一秒内回复到原始状态,并执行补间动画。
.staggerFrom(["#House > path:nth-child(34)", "#House > path:nth-child(32)"],0.8,{scaleY: 0,transformOrigin: "bottom",ease: Bounce.easeOut,stagger: 0.2},0,"scene1+=0.5")
与from相似,只是staggerFrom可以一次放入多个CSS Selector,用stagger这个属性来设置数组中的Selector要以怎样的时间差出现。
详细API参数可以参考官方文档
接着回到我们的SVG,在devtool的帮助下,要取出svg内部元素的 CSS Selector 非常容易,在element面板中找到对应的DOM元素点击右键,选择 Copy -> Copy selector,就可以直接复制到该元素的CSS Selector:
现在我们能取得svg 中任意部分的CSS Selector,也知道怎么用GSAP API 来进行补间动画,现在是时候将其结合起来!
我们先调整下基本布局,一般在空白Html内直接放入svg时,图案大多会紧靠页面左上角,我们可以套用个margin: 0 auto将其置中,看起来会顺眼一些,你也能额外加些padding。我们在页面添加一个按钮来调用动画:
<!--html part-->
<button onclick="animateBike()"> Build! </button>
<!--css part-->
<style>
#Capa_1 {margin: 0 auto;display: block;width: 256px;height: 100%;
}
</style>
接着我们使用TimelineMax提供的staggerFrom函数,利用devtool将滑板车的轮子部分找出来,复制它们的CSS Selector,放入staggerFrom函数参数中,设定x与y轴的scale都从0开始,由center增长,采用Bounce.easeOut的ease function ,而四个Selector间以stagger: 0.2的属性值作为补间动画出现的时间差:
const tl = new TimelineMax();tl.staggerFrom(["#Capa_1 > g > path:nth-child(1)","#Capa_1 > circle:nth-child(7)","#Capa_1 > path:nth-child(6)","#Capa_1 > circle:nth-child(5)"],1,{scaleY: 0,scaleX: 0,transformOrigin: "center",ease: Bounce.easeOut,stagger: 0.2})
简单几行代码,就能让我们的滑板车动起来!
补间是一个术语,用于描述逐帧序列,有时也称为"中间"。 在那个地方,一个动作导致下一个动作产生一个流畅的动作。
完善动画
你可以把TimelineMax想像成时间轴,动画按指定顺序执行,而staggerFrom则可以同时让多个DOM元素以微小时间差的顺序启动,另外我们还可以设置一些Flag来指定要等到哪几个动画完成后,才接续其他动画。
最后,发挥自己的创意,使用各种API打出一套组合拳 :
结论
看到这里,跃跃欲试了吗?
总之,我自己觉得蛮有趣的,希望或多或少对读到这篇文章的人有点帮助。
最后给大家分享一些资料,需要的可以点击这里领取
干货来袭!腾讯T4大佬,十分钟教你用svg做出精美的动画相关推荐
- 十分钟教你用 svg 做出精美的动画!
摘自:前端大全 以下文章来源于前端进阶之路,作者三余 前言 经常在 Codepen 上看到大侠们用 SVG 画出不可思议的动画,我一直很好奇他们是怎么运作的,总觉得这需要对 SVG 有足够透彻的了解, ...
- 十分钟教你开发EOS智能合约
十分钟教你开发EOS智能合约 在CSDN.柏链道捷(PDJ Education).HelloEOS.中关村区块链产业联盟主办的「EOS入门及最新技术解读」专场沙龙上,柏链道捷(PDJ Educatio ...
- 一分钟教你学会python_十分钟教你学会python编写小游戏
原标题:十分钟教你学会python编写小游戏 看过,估计大家都已经精通了吧,好的,话不多说,今天就活学活用,用python来编写纸牌游戏21点,江湖人称黑杰克,BLACK JACK-(注意法式卷舌). ...
- python批量删缩进_鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频?...
鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频? 前言 半个月前,后台有个小伙伴问我,如何将视频中的音频提取出来,并且将声音转成文字写入到 word 中,正好接下来的 ...
- 十分钟教你配置frp实现内网穿透
十分钟教你配置frp实现内网穿透 一.frp的作用 利用处于内网或防火墙后的机器,对外网环境提供 http 或 https 服务. 对于 http, https 服务支持基于域名的虚拟主机,支持自定义 ...
- python编写小游戏17_十分钟教你学会python编写小游戏
原标题:十分钟教你学会python编写小游戏 看过,估计大家都已经精通了吧,好的,话不多说,今天就活学活用,用python来编写纸牌游戏21点,江湖人称黑杰克,BLACK JACK-(注意法式卷舌). ...
- 十分钟教你掌握CPU缓存
十分钟教你掌握CPU缓存 一. 基础知识 二. 缓存命中 三.缓存一致 四.程序性能 示例一 示例二 示例三 一. 基础知识 首先,大家都知道现在CPU的多核技术,都会有几级缓存,现在的CPU会 ...
- 【Linux + Makefile】十分钟教你学会Makefile的FORCE
相信大家在使用Linux环境编程的时候,一定接触过Makefile这个玩意.Makefile在搭建自定义的编译环境,尤其是自动化编译.多功能一键编译等功能上,还是发挥了很大的作用.如果接触过Linux ...
- boot分布式计算 spring_腾讯T4大佬剖析SpringBoot2 :从搭建小系统到架构分布式大系统...
写在前面SpringBoot是目前Spring技术体系中炙手可热的框架之一,既可用于构建业务复杂的企业应用系统,也可以开发高性能和高吞吐量的互联网应用.Spring Boot框架降低了Spring 技 ...
最新文章
- HDU 1005 Number Sequence
- sdn智能互联系统及开发平台_聊天交友平台系统APP开发
- ML之多分类预测:以某个数据集为例从0到1深入理解科学预测之多分类问题的思路框架
- powerdesigner自动生成代码的修改
- 解决fullgc_「OOM」Java heap space原因与解决
- ubutun安装MySQL hive配置_Hive安装以及部署(Ubuntu-MySql)
- 解决项目莫名奇妙的报错问题
- MapReduce的方式进行HBase向HDFS导入和导出
- android自动软键盘,Android自定义软键盘
- coco2dx c++ HTTP实现
- c语言 函数的参数传递示例_C-用户定义的函数示例,没有参数,没有返回类型...
- 锐捷设备AC旁挂核心交换机①
- mac无法读取移动硬盘怎么办?mac怎么使用ntfs硬盘
- 全向轮三轮小车的搭建(一)
- 国外香港云计算服务器评测,UCLOUD云计算活动及体验香港云主机综合评测记录
- Mysql磁盘空洞的成因以及重建表的几种方式
- 【OpenCV学习】使用OpenCV打开图片视频
- 数据采集—数据采集技术
- 【经验】怎么把Word文字下面的红线去掉?
- Bootstrap后台开发模板整理