公众号SVG动画交互实战代码


Posted in Javascript onMay 31, 2020

越来越多的公众号在图文消息中加入了SVG动画交互效果,SVG支持事件触发动画,相对于单独做一个H5而言,由于公众号消息依托于微信服务器,为广告主节约了服务器流量成本。这次我们以苹果公众号的一篇交互消息为例,剖析下里面的效果是怎样实现的。

公众号SVG动画交互实战代码

苹果公众号SVG交互

动画主要分为两屏,第一屏出现闪动文字提示用户点击交互,用户点击后第一屏动画消失接着播放第二屏的gif动画,最后画面停止在产品图片帧上。

1.首先构建第一屏动画:

1.1 SVG的基本结构

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"></svg>

先来介绍viewBox属性

viewBox=”x, y, w, h”

x、y 控制SVG内所有元素的相对位置。w,h用来控制svg宽高,这里的宽高并不是svg元素的dom尺寸,而是svg的内分辨率,受svg的width,height和preserveAspectRatio等属性值影响。

preserveAspectRatio=”xMinYMin meet”

preserveAspectRatio属性用来设置viewBox的缩放和对齐方式,xMinYMin meet的意思是,根据视口的宽高进行等比例缩放,这里的视口就是指width和height值组成的矩形区域。

1.2 加入闪动文字

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <text x="340" y="1750" fill="#fff" >>点一下屏幕,有请主角<</text>
</svg>

设置文字的位置和颜色属性。

1.3 为文字添加动画,这里需要用到 <g>和<animate>标签

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
   <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
   <text x="340" y="1750" fill="#fff" >>点一下屏幕,有请主角<</text>
 </g>
</svg>
  • animate标签用来对元素的某个属性进行动画。
  • attributeName指定属性名,这里是透明度opacity。
  • begin指定动画开始的时间,可以是一组用分号分隔的值。
  • dur指定动画的时长,值越小动画越快,反之亦然。
  • values指定attributeName属性的变化值,可以是单值也可以是分号分隔的列表。这里的1;0;1指定是透明度在0->1->0之间变换,产生闪烁的效果。
  • g标签即group的缩写,用来对元素进行组合, 这样animate效果就限制在组内。

1.4 加入首屏和动画图片

<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" >>点一下屏幕,有请主角<</text>
   </g>
  </g>
 </g>
</svg>
  • 这里我们加入了两组foreignObject对象用来显示封面和gif动画图片。
  • foreignObject可以理解成一个svg容器,支持x, y, width, height, transform位移等属性,这里我们将包含gif动画图片的foreignObject位移属性设置为 transform=”translate(1080, 0),使gif动画沿x轴向右移动自身宽度距离,使动画开始隐藏起来,等待事件触发显示。
  • 我们将元素放在不同的分组里,方便后面添加事件。

1.5 加入事件触发

<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>
 <g>
  <animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" >>点一下屏幕,有请主角<</text>
   </g>
  </g>
 </g>
</svg>
  • animateTransform用来对元素进行位移,旋转,斜切等操作。
  • transform,可以是 translate、scale、rotate、skewX、skewY 。
  • fill,指定动画间隙的填充方式。支持参数有:freeze、remove。remove是默认值,表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态。
  • restart, 支持的参数有always、whenNotActive、never。always是默认值,表示每点一次重新执行动画;whenNotActive表示动画正在进行的时候不能重启动画;never表示动画仅执行一次。
  • begin, 延迟时间已经介绍过,这里补充下click,表示点击后立即触发, click+2表示点击后2秒触发。
<animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>

这段代码的意思是,鼠标点击后,我们将gif动画所在组向左移动1080距离,使原来隐藏的动画暴露出来,还记得我们开始是怎么隐藏gif动画的么。

<animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>

这里添加了两组animate动画,我希望在动画播放结束后隐藏当前的svg层,这里设置在点击事件3.5秒后触发,正好是动画播放的时间。

2.构建第二屏动画:

第二屏动画是一张静态图片,用来显示gif动画最后一帧的产品图,没有什么新知识点,如有疑问可以参考本文的源码。

最后介绍一下两屏动画的组织方式,我将每屏动画放在一个单独的div标签中,并设置div标签的高度为0,由于svg元素的高度不受父容器高度影响,结果会产生类似层叠定位效果,就像设置父容器定位position:absolute一样。

<div >
 <svg></svg>
</div>
<div >
 <svg></svg>
</div>

公众号SVG动画交互实战代码

这样我们就可以将多组动画放在各自的div中,当使用animate动画隐藏了该组svg元素后,下面一层的svg就会展示出来等待交互。

3. 插入到公众号文章中

我们现在用到的图片都在本地,首先需要将用到的图片上传到公众号素材库中,提取url地址并替换掉本地图片地址。

公众号SVG动画交互实战代码

因为公众号图文编辑器本身并不支持代码编辑,我们需要借助chrome开发者工具,将代码插入到编辑器并保存。

公众号SVG动画交互实战代码

大功告成,快看看效果吧!

源码和效果演示:

https://dev.xingway.com/experiments/wechat/svg/

到此这篇关于公众号SVG动画交互实战代码的文章就介绍到这了,更多相关公众号SVG动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 #Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 #Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
JavaScript Window浏览器对象模型原理解析
May 30 #Javascript
基于canvasJS在PHP中制作动态图表
May 30 #Javascript
You might like
Access数据库导入Mysql的方法之一
2006/10/09 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python 装饰器使用详解
2017/07/29 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python 忽略warning的输出方法
2018/10/18 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python中常见错误及解决方法
2020/06/21 Python
django rest framework使用django-filter用法
2020/07/15 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
文化产业实施方案
2014/06/07 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python