android svg 线条动画教程,简单的SVG线条动画
[TOC]
看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下;
先上几张图看看:
简单的线条动画
ps4
用到的属性
stroke 定义边框颜色值;
stroke-width 定义描边宽度;
stroke-dashoarray 前一个数值表示dash,后一个数字表示gap长度(只写单个值表示dash/gap尺寸一致),往复循环;
stroke-dashoffset 虚线开始时的偏移长度,正数则从路径起始点向前偏移,负数则向后偏移;
原理
定义 stroke-dashoarray 属性,使svg图案的 dash 和 gap 长度大于等于最终图案长度值(记为len);
将其往前偏移len,使dash部分初始隐藏,只显示 gap , gap 又是空白的,所以初始时页面无任何东西;
定义动画,不断改变 stroke-dashoffset 的值直至为0,就出现了动画;
绘制svg图案
主要使用到 path 标签,具体可以看 这里 ;
复杂点的图案就不建议手动书写,可采用第三方软件,导出成svg文件,删除无用代码即可,如:
Inkscape
在线编辑
动画实现
可通过css或js来控制动画的实现,css比较简单,但图案的长度等参数不易掌控;
CSS实现
path {
stroke-dasharray: 610;//实线-间隔长度都是610(大于所画长度)
stroke-dashoffset: 610;//往前偏移610(超过图形长度),则初始显示为空白
animation: dash 5s linear;//添加动画,使偏移逐渐变为0,以显示完整图案
animation-fill-mode: forwards;//动画完成后保持不变
}
// 定义css动画,@keyframes yourName
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
js控制动画
初始化相关属性
//代码获取长度并设置动画相关属性
var path = document.querySelector('path');
var len = path.getTotalLength();
console.log("总长度 : " + len);
//定义实线和空白区域长度
path.style.strokeDasharray = len + 10;
//定义初始dash部分相对起始点的偏移量,正数表示往前便宜
path.style.strokeDashoffset = len + 10;
方式1:使用transition
// 方式1:参考文章: https://jakearchibald.com/2013/animated-line-drawing-svg/
path.style.transition = path.style.WebkitTransition =
'none';
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 5s ease-in-out';
path.style.strokeDashoffset = '0';
方式2:定时刷新重绘
var initial_ts = new Date().getTime();
var duration = 5000;
var draw = function () {
var progress = (Date.now() - initial_ts) / duration;
if (progress < 1) {
path.style.strokeDashoffset = Math.floor(len * (1 - progress));
setTimeout(draw, 50);
}
};
draw();
方式3:使用requestAnimationFrame
var initial_ts = new Date().getTime();
var duration = 5000;
var handle = 0;
var animate = function () {
var progress = (Date.now() - initial_ts) / duration;
if (progress >= 1) {
window.cancelAnimationFrame(handle);
} else {
path.style.strokeDashoffset = Math.floor(len * (1 - progress));
handle = window.requestAnimationFrame(animate);
}
};
animate();
方式3比较依赖系统刷新率,若硬件性能问题导致fps下降严重,则可能出现较严重卡顿现象
最终效果
参考
android svg 线条动画教程,简单的SVG线条动画相关推荐
- 【UnityDragonBones】像素角色人物骨骼动画教程(三)骨骼动画人物奔跑起来
[手机游戏像素画美术教程]跟Tsugumo学像素画系列-奔跑动画序列(完结) [手机游戏像素画美术教程]跟Tsugumo学像素画系列-让光照进来 [手机游戏像素画美术教程]跟Tsugumo学像素画系列 ...
- html5二维动画教程,H5+JS二维动画制作的一个实例
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: ...
- 大量电气自动化专业的Flash动画教程开始上架,你期待吗?
http://pan.baidu.com/s/1dD6f4PF 电路分析Flash动画教程 1天搞定模电数电FLASH课件视频教程 39个动画精美讲解 初学者必备 电力电子技术Flash动画教程 液压 ...
- 安卓动画全解:补间动画(视图动画)、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性,动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解 安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...
- android svg 线条动画教程,SVG之旅:SVG线条动画实现原理
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己.非常的酷.@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的 ...
- svg android动画制作,SVG动画案例的学习_SVG, SVG Animation, Animation, Web动画 教程_W3cplus...
平面设计已成为2016年可见的趋势,显然,这就是SVG用法又重新走入人们的视野的原因.好处有很多: 独立的分辨率.跨浏览器兼容性以及DOM节点的可访问性.本文中,我们将看看如何使用SVG从简单的插图创 ...
- HTML5/CSS3系列教程:使用SVG图片
为什么80%的码农都做不了架构师?>>> 日期:2013-3-25 来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG. ...
- svg.js使用教程
在日常web开发过程中,我们会需要显示一些图形化的元素,使用div+css.ps图片是常见的实现方式. 但使用svg来绘制可能更加合适,SVG是可缩放矢量图形,有一些预定义的形状元素,可被开发者使用和 ...
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言 本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 的补充和实例说明各种技术的使用方式. VML 的用法和实例 引入命名空间之后,就可以 ...
最新文章
- 学计算机专业需要考的证有哪些科目,自考计算机专业的考试科目有哪些?
- 如何在JAVA代码中执行 exec master..xp_cmdshell @cmd // 当作SQL语句调用就成了 或者调用 Runtime.getRuntime().exec
- ALM11需求和测试覆盖率图解1
- MediaCodec的使用和若干问题处理
- RT-Thread源码学习第六篇,线程调度器(1)
- 浏览器了解(七)Layout
- 用Java写一个浪费cpu的程序_Java程序是如何浪费内存的
- VS2015编译ffmpeg的问题解决
- 304 Not Modified 的意思 (Web的Cache问题)
- 使用SubSonic生成数据访问层步骤
- 2022.08.24【R语言】|pheatmap外接函数调用时不能有NA/NaN/Inf(arg10)报错问题及解决方案
- ping localhost
- VOC数据集提取自己需要的类
- Java 面试题及答案
- 清除file类型的input值
- Win10无法访问网上邻居共享设备及共享文件夹错误代码(0x80004005)
- 二极管的分类及常用方法
- 零基础零代码实现可视化报表
- spring framework远程代码执行漏洞复现(CNVD-2022-23942 CVE-2022-22965)
- linux管理工具WDCP的安装教程