有关SVG中遮罩动画跳帧的问题分析
0 结论
图片动画的 begin 参数值应设置 大于 0 的值,如 1s
具体可参考SVG SMIL动画的begin,end属性详解
1 问题代码分析
1.1 实现代码
首先看一个由SVG遮罩动画实现的骰子滚动动画,代码如下:
<svg viewBox="0 0 99 114"><!--轮播动画--><g><!--第1组图片--><foreignObject x="0" y="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphEShk5pI15RXtIDe5h1jYUDIqHuqwqQYtpY6GujicWRGicjwsw1ibqy9XZhEw/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><!--第2组图片--><foreignObject x="100" y="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphEShBbto0SE9libibDa8yOCTBQsBH6Vc9EtAEBzjWnGpM5lOdCwtqJRTFEew/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><!--第3组图片--><foreignObject x="200" y="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphEShlmDc5uofMjodb18DonTNtHF7hWKCXFFK3oABWcibd8icYguaICPkIiaEw/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><!--第4组图片--><foreignObject x="300" y="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphESh9d0iauOwlJlMdCVLbnGwLP5ZE3CsL91CeLuJ3K4N4ZDpKNGBQKruIuw/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><!--第5组图片--><foreignObject x="400" y="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphEShWonkbHPTE1Kpl2AbvxIO9xmzBGib2JMktSyN3vKUeSKKhFjlOQfGQEQ/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><!--第6组图片--><foreignObject x="500" y="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphEShokNjcvBpyMLorrTR8sp376M49fmicnfqTOMqY6fibeODUqgxNmgZdusw/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><!--动画设置--><animateTransform attributeName="transform" type="translate" values="0 0;-200 0;-500 0;-300 0;-100 0;-400 0;" repeatCount="indefinite" fill="freeze" begin="0s" end="touchend" dur="3s" calcMode="discrete"></animateTransform></g><!--遮罩层--><g><foreignObject y="0" x="0" height="100%" width="100%"><svg style="margin: 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/qicPQRG4YVIE4ib3icibS1JL2kPoCHWphEShk5pI15RXtIDe5h1jYUDIqHuqwqQYtpY6GujicWRGicjwsw1ibqy9XZhEw/0?wx_fmt=png");background-size: 100%;" viewBox="0 0 99 114"></svg></foreignObject><animateTransform attributeName="transform" type="translate" values="0 0;-100 0;" fill="freeze" begin="touchstart" dur="0.0001s" calcMode="discrete" restart="never"></animateTransform></g>
</svg>
1.2 原理阐释
既然定位为遮罩动画,那该动画必然由图片层与遮罩层组成,上述代码中的3-27行,链接了6张骰子的图片,由其左上角坐标值的变化
x="0" y="0";
x="100" y="0";
x="200" y="0";
x="300" y="0";
x="400" y="0";
x="500" y="0";
不难看出,底层图片排列方式为横向依此排列的,示意图如下
排列好图片后,需要设置图片动画,此处设置为 translate 即平移动画,按上述图片坐标依此设置平移终点。
<!--动画设置--><animateTransform attributeName="transform" type="translate" values="0 0;-200 0;-500 0;-300 0;-100 0;-400 0;" repeatCount="indefinite" fill="freeze" begin="0s" end="touchend" dur="3s" calcMode="discrete"></animateTransform>
最后设置遮罩
<animateTransform attributeName="transform" type="translate" values="0 0;-100 0;" fill="freeze" begin="touchstart" dur="0.0001s" calcMode="discrete" restart="never"></animateTransform>
其中 values 参数指定了可显示的区域,即一个骰子面图片的范围,其余部分被遮挡不予显示
由以上几部分组成了一个完整的SVG遮罩动画。
2 问题分析
在手机端运行上述代码可知,不管用户在哪一刻点击骰子,都会定格在5点,原因是:
begin值为 0,没有偏移量,用户点击后,动画执行完毕,定格在最后一帧图片上,由上述代码可知,平移坐标内设置的最后一帧,正是5点对应的图片坐标。
而 begin 值设置设置为大于0的数之后,有了偏移量,故动画不会在结束后退回最后一帧,而是保留在了用户点击对应的图片处。
具体可参考SVG SMIL动画的begin,end属性详解
所以最后将上述代码更改为
<animateTransform attributeName="transform" type="translate" values="0 0;-200 0;-500 0;-300 0;-500 0;-300 0;-500 0;-300 0;-100 0;-400 0;-500 0;-100 0;-400 0;-300 0;" repeatCount="indefinite" fill="freeze"begin="1s" dur="3s" calcMode="discrete" end="click"></animateTransform>
完美解决跳帧问题
有关SVG中遮罩动画跳帧的问题分析相关推荐
- js svg语音波动动画_整理一些有趣的svg动画
原因 原因很简单,我不想成为一个api前端工程师,想能够多学一点.偶尔的喜欢做一些html可能难以完成的效果,去年用canvas写了一份简单的gant图,感觉还不错.后来画流程图的时候搜索各大网站发现 ...
- 关于在SVG中如何实现gif动画的问题?
关于在SVG中如何实现gif动画的问题? 由于svg不支持动画,我做了个替代方法如下 step 1:先把多帧gif分成单帧并透明化 <image id="gif0" widt ...
- 在uni-App(Vue)中使用 SVG + JS 自定义动画:模拟关键帧
问题 为什么要使用SVG来制作动画? SVG是矢量图形,放大不会失真,而且动画看起来很丝滑,能够实现很多平面动画效果,这点是CSS动画比不上的 在Vue中使用SVG有哪些难点? 注意载入顺序,应该在m ...
- 使用SVG中的Symbol元素制作Icon
前言 随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果.我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给 ...
- js svg语音波动动画_让动效更酷炫!4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
- svg配合css3动画_带有Adobe Illustrator,HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
- 纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术 简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果 纯CSS实现帅气的SV ...
- android svg指纹录取动画_你知道几种前端动画的实现方式?
随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果.那前端实现动画效果的方式有哪些呢,大致有如下几种: 一. ...
- 【转】CSS和SVG中的剪切——clip-path属性和clipPath元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
最新文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用按钮
- C语言易错题集 第二部
- 京瓷m5021cdn如何设置扫描_京瓷产品让您轻松应对潮湿天气
- (转)C#中的委托(Delegate)和事件(Event)
- Python使用Apriori算法分析导演请某演员后还会请哪个演员
- #!/usr/bin/env python作用
- leetcode942. DI String Match
- python查看dll中所有函数_Python中的函数
- tomcat常见配置及优化、升级
- Win32下对多个的线程句柄的关闭的控制(上)
- 计算机考研数据结构代码题总结--Day01
- 状态压缩dp学习小记part1
- 笔记本开机黑屏只有鼠标显示
- PHP 换行符的一些说明
- 无敌哈拉少(奋起反抗的人)
- mysql 权限管理
- 基于STM32使用嵌套结构体摸索内存对齐
- 商用DCLS双核锁步lockstep技术总结
- 照片的批量命名—Windows下利用cmd命令、txt文件、excel工具和bat文件对照片进行批量重命名
- 华为路由器:NAT地址转换技术
热门文章
- 关键词高亮:HTML字符串中匹配跨标签关键词
- Cocos2dx-lua luabindings 示例
- 非常全的 前端资源分享--只为更好前端
- 【视频】互联网公司面试流程 注意事项 加分点 防骗指南
- 用conda安装pytorch报错避坑指南,几种解决方法
- ppt画笔标记在哪里|ppt中画笔工具功能怎么用?
- create table ,create table as 与create like三种建表方式的使用详解
- 【工作一年总结】做自己喜欢的事时是会发光的,可是老天,能让这光芒更强烈些吗?
- 华为云WeLink即将支持电子合同签署
- 因为被骗8000块,他愤而“自学”电信诈骗搞到115万,如今他这样