分类
CSS

一种新动画 我称之为组装。

这种动效也是我灵光一闪想出来的,当然需要一些基础的沉淀。

动画效果

assemble - 一种新动画 我称之为组装。

技术储备

这里需要两种技术沉淀,第一种是transition-timing-function中的steps,它可以使动画像阶梯状呈现,就像一部连续的电影取其中的几帧一样。第二种是-webkit-mask遮罩,在css中若对一个元素使用遮罩,那被遮元素则只能看见一部分内容,这部分就是遮罩图片不透明的部分。如果遮罩图片有半透明的部分,则也会显示出来,只不过显示出来的部分也是半透明的。

思路

首先我们假设有这样一张遮罩图片

0000.20.40.60.811111
00000.20.40.60.81111
000000.20.40.60.8111
里面的数字代表透明度

然后我们把遮罩元素的大小定义为宽400%高100%。

现在我们遮罩的位置在初始位置,所以我们是看不见任何东西的。

那如果我们遮罩的位置向右移动一格呢?我们会发现右上角有一个小方块能显示出来了,按照规律一步步的向右移动,最后该元素就会完全显示!

好了,我们现在要解决一个每次移动都精准的只移动一格的问题。

首先我们要让遮罩移动,则一定会改变-webkit-mask-position,它的作用规则与background-position是一样的。无论背景大小定义的有多大,只要他们的值定义为100%,那就会移动到最右边。然后steps函数就派上了用上,我们设定移动到最右边需要9步,那么每一次截图出来的动画正好是移动一格的位置。

 @keyframes wpSpan{
            0%{
                -webkit-mask-position:0;
            }
            100%{
                -webkit-mask-position:100%;
            }
        }
.x1{
            height:510px;
            background-image: url(./img/border-1.png);
            background-size:cover;
            -webkit-mask-image:url(./svg/8.svg);
            -webkit-mask-size: 400% 100%;
            visibility: hidden;
            -webkit-mask-position:0;
            transition: -webkit-mask-position 1s steps(9,end),visibility 0s 1s;
        }
.x1.active{
            visibility:visible;
            -webkit-mask-position:100%;
            transition: -webkit-mask-position 1s steps(9, end);
        }

图片选择

其实这样看来,最后使这个动画实现的决定性因素其实是图片。我曾经做过这样的探索,如果使用canvas创建一个这样一个图片并转换为base64格式能不能实现这样的效果呢?

结论是实现效果不理想,因为图片太小,在放大后小方格就显示不出来了,如果图片太大,那获取图片的代价有点大,而且有失真的缺点。

所以我选择的是svg图片,如果要制作上述的遮罩,只要设定宽12高3,在非透明的地方放入小方块。

普通的svg图片是不能自适应大小的,所以我们要设置如下

<svg width="12" height="3" viewBox="0 0 12 3"
     preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
。。。。。
</svg>

结束语

如果想要源代码和这个svg图片的话,欢迎访问我的github

https://github.com/zhuishao/hundredstest/blob/master/138.html

分类
svg

数据大屏边框(1)续

第一次对数据大屏边框的尝试是对svg的基础运用。其中会造成各种问题导致无法在项目中实用。这次会在前一次的基础上做的一些优化。

数据大屏边框(1)

效果图

此次的优化项

1.动画

开头的动画采用smil(同步多媒体集成语言)动画的形式,每一个svg属性下都可以采用一个或多个smil动画。且由于同步的特性,一个动画的开始可以由另一个动画的结束为触发。第一个动画的开始采用了这一段代码。

<animate id="a1" attributeName="fill" restart="never" begin="indefinite" to="rgba(19,101,233,.4)" fill="freeze" dur="3s"></animate>
<script>
    document.addEventListener('click', function() {
        document.getElementById('a1').beginElement();
    })
</script>

而动画的效果是基于stroke,stroke-dasharray,stroke-dashoffset这三个属性。

 <path d="M 673 300 L 678 300 L 678 320 L 673 320 z" fill="transparent" stroke="rgb(14,80,191)" stroke-width="2"  stroke-dasharray="100,100" stroke-dashoffset="100" stroke-linejoin="round">
            <animate attributeName="stroke-dashoffset" dur="1s" to="0" begin="a2.end + 2.6" fill="freeze"></animate>
        </path>

以这段代码为例,首先这是一个小方块,它的初始状态里有stroke-dasharray=“100,100”,stroke-dasharray是将描边以虚线的形式展现,作用是100长度实线,100长度虚线,100长度实线,100长度虚线。。。显然,这个path组成的小方块并没有100那么长,但是没关系,只要比它实际的长度长就可以,这个实际的长度测算方式是在html页面中我们所能看到的长度,如果它被放大,那么实际的长度也会变大。而stroke-dashoffset的作用是偏移量,数值为正向左偏移。因此就变成了初始状态下,我们看不到东西的情况。

其次动画的状态也需要说明。attributeName=”stroke-dashoffset” – 动画改变的属性,fill=“freeze”-动画结束后以冻结的方式,不会回到初始状态。

2.适配各种大小

ui姐姐给出的设计稿是一张图片,因此每个元素的尺寸都是固定的,但是实际上我们的展示内容不可能与设计图的大小完全一致。所以需要加一些属性。

viewBox=“0 0 697 462”以x=0,y=0为基点,697为宽度,462为高度。

preserveAspectRatio=”none”,大小改变后的等比例收缩方式,none说明不按照等比例收缩

3.大小按等比例缩放后描边大小会跟着改变,但是不想让它改变

设置style属性

 path{
            vector-effect: non-scaling-stroke;
 }

(完)