分类
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

由zhuishao

github:https://github.com/zhuishao/

发表评论

电子邮件地址不会被公开。 必填项已用*标注