css3 实现逐帧动画

实现逐帧动画需要使用到的是Animation动画，该CSS3的Animation有八个属性；分别是如下：
1: animation-name
2: animation-duration
3: animation-delay
4: animation-iteration-count
5: animation-direction
6: animation-play-state
7: animation-fill-mode
8: animation-timing-function

含义分别如下：
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。如果设置 infinite 是动画循环播放。
animation-direction 规定是否应该轮流反向播放动画。
animation-play-state 属性规定动画正在运行还是暂停。属性值有2个；paused(规定动画已暂停。) running(规定动画正在播放。)
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。 有如下四个值：
1: none（不改变默认行为）;
2: forwards (当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。)
3. backwards 在animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
4. both 向前和向后填充模式都被应用。

其中forwards属性值经常会被使用到；

animation-timing-function 规定动画的速度曲线。
至于动画基本的东西这边不讲解，有空大家可以看看如下这篇文章；http://www.cnblogs.com/tugenhua0707/p/5385261.html

我们先来理解如何做css3的逐帧动画，该动画的过程类似于gif动画；

那么需要先理解使用动画函数的属性 steps；
该属性值如下使用：
animation: redBag-heart1 5s steps(1, end) infinite;
-webkit-animation: redBag-heart1 5s steps(1, end) infinite;

该属性值有2个参数：
第一个参数指定了时间函数中的间隔数量（必须是正整数）。
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start 等同于steps(1,start)，动画分成1步，start 第一帧是第一步动画结束
step-end 等同于steps(1,end)：动画分成一步，第一帧是第一步动画开始，默认值为end。

第一个参数是动画分成几步完成，它是指两个关键帧之间的动画，比如如下代码：

@keyframes redBag-heart1 {
      0% {
        transform: scale(0.08, 0.08);
      }
      25% {
        transform: scale(0.2, 0.2);
      }
      40% {
        transform: scale(0.4, 0.4);
      }
      60% {
        transform: scale(0.6, 0.6);
      }
      75% {
        transform: scale(0.8, 0.8);
      }
      90% {
        transform: scale(1, 1);
      }
      100% {
        transform: scale(3, 3);
      }
}

它是指如上的 0% 到 25% 两个关键帧分成几步完成，而不是整个keyframes；因此如果我们设置 steps(1,start)的话，说明是两个间隔分成1步完成；

基本的知识点就是如上；现在我们可以来做一个css3的逐帧动画，无非也就是说0% 它是一个什么样子的，20%的时候又是一张背景图，40%又是一张背景图，这样的组成起来的；所以我们平时看到的很多动画，看起来很复杂，其实都是由很多简单的动作组成起来的；

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<script src="./js/zepto.js"></script>
<style type="text/css">
    body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;}
    h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;}
    ul,dl,ol{list-style:none;}
    img,fieldset{border:none;}
    img{display:inline-block;overflow:hidden;vertical-align:top;}
    em,address{font-style:normal;}
    sup,sub{vertical-align:baseline;}
    table{border-collapse:collapse;border-spacing:0;}
    q:before{content:"";}
    q:after{content:"";}
    button{cursor:pointer;}
    textarea{word-wrap:break-word;resize:none;}

    .hidden {display:none;}
    /* 撩红包css3动画 */
    .animate-container {
      width: 150px;
      height: 168px;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .redBag-animate {
      width: 150px;
      height: 168px;
      background: url("http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001846147-294383374.png") no-repeat center center;
      animation: redBag-animate1 5s steps(1, end) 1;
      -webkit-animation: redBag-animate1 5s steps(1, end) 1;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }
    .redBag-heart {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .redBag-heart img {
      animation: redBag-heart1 5s steps(1, end) infinite;
      -webkit-animation: redBag-heart1 5s steps(1, end) infinite;
      margin-top: 31px;
    }
    @keyframes redBag-heart1 {
      0% {
        transform: scale(0.08, 0.08);
      }
      25% {
        transform: scale(0.2, 0.2);
      }
      40% {
        transform: scale(0.4, 0.4);
      }
      60% {
        transform: scale(0.6, 0.6);
      }
      75% {
        transform: scale(0.8, 0.8);
      }
      90% {
        transform: scale(1, 1);
      }
      100% {
        transform: scale(3, 3);
      }
    }
    @-webkit-keyframes redBag-heart1 {
      0% {
        transform: scale(0.08, 0.08);
      }
      25% {
        transform: scale(0.2, 0.2);
      }
      40% {
        transform: scale(0.4, 0.4);
      }
      60% {
        transform: scale(0.6, 0.6);
      }
      75% {
        transform: scale(0.8, 0.8);
      }
      90% {
        transform: scale(1, 1);
      }
      100% {
        transform: scale(3, 3);
      }
    }
    @-webkit-keyframes redBag-animate1 {
      0% {
        background-position: 0 0;
      }
      14.3% {
        background-position: 0 -168px;
      }
      28.6% {
        background-position: 0 -336px;
      }
      42.9% {
        background-position: 0 -504px;
      }
      57.2% {
        background-position: 0 -672px;
      }
      71.5% {
        background-position: 0 -840px;
      }
      100% {
        background-position: 0 -1008px;
      }
    }
    @keyframes redBag-animate1 {
      0% {
        background-position: 0 0;
      }
      14.3% {
        background-position: 0 -168px;
      }
      28.6% {
        background-position: 0 -336px;
      }
      42.9% {
        background-position: 0 -504px;
      }
      57.2% {
        background-position: 0 -672px;
      }
      71.5% {
        background-position: 0 -840px;
      }
      100% {
        background-position: 0 -1008px;
      }
    }
</style>
</head>
<body>
<!-- <div class="btn" id="btn">点击动画</div> -->
<div class="animate-container">
    <div class="redBag-animate"></div>
    <div class="redBag-heart hidden">
        <img src="http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001921991-1838406901.png" width="100%" class="heart-img"/>
    </div>
</div>

<script type="text/javascript">
    var animateContainer = document.querySelector(".redBag-animate");
    animateContainer.addEventListener("webkitAnimationEnd", function(e) {
         $(".redBag-heart").removeClass("hidden");
    });

    var animateHeart = document.querySelector(".heart-img");
    animateHeart.addEventListener("webkitAnimationEnd", function(e) {
         $(".redBag-animate").addClass("hidden");
    });
</script>
</body>
</html>

用于检测css动画是否完成的 -- JS代码如下：

var animateContainer = document.querySelector(".redBag-animate");
animateContainer.addEventListener("webkitAnimationEnd", function(e) {
     $(".redBag-heart").removeClass("hidden");
});

var animateHeart = document.querySelector(".heart-img");
animateHeart.addEventListener("webkitAnimationEnd", function(e) {
     $(".redBag-animate").addClass("hidden");
});

源码下载

时间： 2024-08-27 21:43:57

css3 实现逐帧动画的相关文章

CSS3 animation 逐帧动画

前言 css3 loading动画 animation介绍 定义和用法 animation属性是一个简写属性,用于设置六个动画属性. animation: name duration timing-function delay interation-count direction; 值 描述 animation-name 规定需要绑定到选择器的keyframe名称 animation-duration 规定完成动画所花费的时间,以秒或毫秒为计 animation-timing-function

css3 animation实现逐帧动画

css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation属性一览 因为animation属性比较多,然后在w3c上看有点蛋疼,干脆也做了一份导图,以后想查看,就一目了然了 使用animation实现逐帧动画 熟悉了animation的属性之后,得找个简单的小项目实现下,逐帧动画好有意思,先跑一个满足下自己思路很简单,就是给元素一个雪碧图的背景,然后添加的

逐帧动画-AnimationDrawable的简单用法

将Animation设置为ImageView的backgrond即可 MainActivity.java: import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget

window.requestAnimationFrame() ,做逐帧动画，你值得拥有

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio

实现逐帧动画和补间动画两种动画效果

1.逐帧动画(Frame Animation)通常在Android项目的res/drawable/目录下面定义逐帧动画的XML模板文件.编码的时候,需要在动画模板文件的<animation-list>标签中依次放入需要播放的图片,并设置好播放的间隔时间. <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"

android 逐帧动画的播放与播放结束操作对象

逐帧动画的xml代码: 1 <?xml version="1.0" encoding="utf-8"?> 2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android" 3 android:oneshot="true" > 4 5 <item 6 android:drawable="@drawabl

Android中的动画具体解释系列【1】——逐帧动画

逐帧动画事实上非常easy,以下我们来看一个样例: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawa

Esfog_UnityShader教程_逐帧动画

有段日子没出这个系列的新文章了,今天就拿一个比较常见也比较基础的利用改变Shader来改变不断调整UV实现播放逐帧动画的小功能.很久没写了就当练练手了.在新版本的Unity中早就已经集成了Sprite2D的功能,而且可以编辑不规则的图形,不过了解一下它的原理,也是蛮好的! 逐帧动画 帧动画大家应该都不陌生,经常会看到把一个动画几帧的的状态按一定顺序整合在同一张图片上,如下图: 从上图中我们可以看出,这个图片动画一共有20帧,从左到右,从上到下依次排布(基本上都是这个规律).为了展示效果我们需要一

Android -- 逐帧动画

在处理耗时工作的时候,大多数会弹出一个加载的框,里面有一个连续旋转的图片,很多时候都是用一张图片,使用rotate来设定旋转,不过看起来不太美观,没有形象感,在3.0之前Android有两种动画效果分别是补间动画和帧动画,用一张图片实现的是使用补间动画,定义给出两个关键帧,通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变. 动画布局