css3-帧动画实现和优化

实现帧动画好多种方式,如css3,gif动图,视频,js帧动画,很多做实验比较这几种方式的优劣,最终还是推荐了css3动画

我就直接说实现方式把

1 css3代码

html:

<div  class="loadingMask"><div class="loadingMask-img"></div></div>

css:

  
.loadingMask{
  position: absolute;
  width: 540px;
  height: 960px;
  overflow: hidden;
}
.loadingMask-img{
  content: '';
  width: 7560px;
  height: 960px;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: url(img/1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  animation: aniVip 2s steps(14,start) 0.1s infinity ;
  }

@keyframes aniVip {
    0%{transform: translate3d(0,0,0);opacity: 1;}
    50%{opacity: 0.8;}  
    100%{transform: translate3d(-7560px,0,0);opacity: 0;}
}

2animate()

var animation = element.animate(keyframes, options);

keyframes 关键帧

一个对象,代表关键帧的一个集合

options 可选项代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象

例如上面的动画用函数写就是:

        let bg=document.getElementById("loadingMask-img") as HTMLElement;
        let myAni=bg.animate([
          {transform: 'translate3d(0,0,0)',opacity:1},  
          {opacity:0.8},  
          {transform: 'translate3d(-7560px,0,0)',opacity:0}
        ],{
          duration:2000,
          delay:100,
          easing:'steps(14,start)',
          iterations:1
        })
        myAni.onfinish=()=>{
          console.log("finish")
          this.showGuide=false;  
        }

这么好用的东西当然兼容性很差了啊,所以你要想用这个函数,需要使用https://github.com/web-animations/web-animations-js

 

 

参考文章:

  1. 强大的CSS3/JS:帧动画的多种实现方式与性能对比
  2. CSS3动画卡顿性能优化解决方案
  3. 借助Web Animations API实现JS keyframes动画

css3-帧动画实现和优化》有1个想法

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据