好文收藏-公众号SVG动画交互实战代码

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

苹果公众号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>

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

3. 插入到公众号文章中

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

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

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

源码和效果演示:

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

原文链接:http://www.guobao0730.com/%E5%85%AC%E4%BC%97%E5%8F%B7svg%E5%8A%A8%E7%94%BB%E4%BA%A4%E4%BA%92%E5%AE%9E%E6%88%98%E4%BB%A3%E7%A0%81/

Windows Server 2019安装Intel I211网卡驱动

由于Windows系统原因,一般桌面主板自带的Intel网卡(典型的包括I211、I211-AT、I217-V、I218-V、I219-V)等,都无法在Windows Server系统上找到对应的驱动。但是,这些网卡几乎都有对应的服务器主板版本(例如I219-LM)。这些网卡其实并没有本质上的差别,只是在驱动层面,利用不同的驱动签名使得显卡不能通用。本文将详细说明如何在Windows Server系统上安装这些驱动。

1、驱动下载

首先,在Intel官网下载网卡驱动程序包,由于Windows Server 2019刚发布,所以目前没有2019的专门页面,但可以通用Windows Server 2016版本(下载页面)。下载完成后,得到一个PROWinx64.exe的自解压安装包,使用7zip或其他解压软件解压到任意文件夹。

2、修改驱动程序文件(以I211为例)

进入第一步解压后的文件夹,依次进入PRO1000 -> Winx64 -> NDIS64文件夹。这个文件夹中,有举例的I211网卡的驱动安装文件。

1

I211

用记事本打开e1r64x64.inf这个文件,搜索I211找到对应的ID

和I219-V差不多的步骤,不过配置的文件是同文件夹下的另一个文件,e1r64x64.inf。同样通过搜索找到I211所对应的ID

5

用这个ID搜索到对应的键[Intel.NTamd64.6.3.1]和配置行

6

将此行复制到后面的另一个键[Intel.NTamd64.6.3]中。保存,关闭。

7

开启测试模式

因为我们修改了签名配置文件,所以如果要安装这些驱动,我们需要开启测试模式,允许未经过签名的驱动。

在CMD(管理员)中执行以下两条命令

执行完后,需要重启电脑,以进入测试模式。

安装驱动

这里以I211网卡驱动安装为例,I219-V安装同理,只是在后续步骤选择驱动程序文件时不同而已。

在设备管理器中,找到那个没有驱动的网络控制器,右键选择“更新驱动程序”

选择“浏览我的计算机以查找驱动程序软件”

选择“让我从计算机上的可用驱动程序列表中选取”

下滑下拉列表,找到并选择“网络设配器”,点击下一步

这里不做选择,点击右下的“从磁盘安装”

在弹出窗口中,点击右下角的浏览,选择我们刚才修改的I211所在的配置文件,即e1r64x64.inf,然后点击确认。

上一步点击完确认后,由于我们之前修改好了配置文件,所以就可以在后续窗口里看见I211驱动了,点击下一步。

这里会弹出一个警告,因为我们对配置文件进行了修改,签名肯定是无法通过验证的,所以这里会有这个警告信息。当然点击“始终安装此驱动程序软件”

安装完成后,在设备管理器中,也能看见这张网卡信息了。

关闭测试模式

安装完成后,关闭测试模式。在CMD中执行以下命令

bcdedit -set loadoptions ENABLE_INTEGRITY_CHECKS
bcdedit -set TESTSIGNING OFF

重启电脑,完成。

6、附加:开启WLAN

默认安装时无线LAN服务是关闭的,如果需要开启,只需要在“添加角色和功能”中,选择开启“无线LAN服务”即可。

目前的家庭网络布置

看到了2011年的网络规划,对比了一下现在的网络情况。

光猫:sa1456c;路由器:虚拟机装软路由ROS;交换机:淘汰的RV325;无线:R8500;NAS:组装产品,能存东西就行。

电视已经不看了,htpc、电视盒子什么的也用不上了。

唱歌:全民k歌和唱吧都不错,唱的水平不高,全民k歌容易一些,哈哈。