四、CSS3 Animation元素运动实现

我们用关键帧关键帧可以实现精灵图的切换,同时通过background-size背景解决了自适应的问题,这样还是不够的,元素还仅仅只是在原地进行帧动画,要让一个元素动起来必须要配合元素坐标的变化
因此在实现上,让元素动起来:
运动 = 关键帧动画 + 坐标变化
关键帧动画我们已经实现了,那坐标的变化就很简单了,一般来说前端能用到的手段
元素.position定位,修改top,left坐标修改
通过css3transform属性的translate

无论用那种需要记住的是元素的坐标 都是 position+translate的值的总和
transitioncss3引入的"过渡"属性,可以让css的属性值在一定的时间区间内平滑地过渡,考虑兼容性问题,这里会额外引入一个插件jquery.transit,这个就是具体封装了transition的CSS3过渡动画的实现
接下来代码部分就非常简单了
transition的使用与jQuery提供的animate()方法基本差不多,所以使用上很容易接受,让飞鸟执行一个飞的动作,可以这样用

$(".bird").transition({ 'right': "3rem",},  
           10000,'linear',function(){ alert("结束")});

只要给出position的坐标值,同时给出变化的时间就让元素动起来了,结合一下精灵动画,是不是看起来物体运动就是那么回事了?

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>圣诞主题</title>
    <style type="text/css">
    .bird {
        min-width: 4rem;
        min-height: 2rem;
        top: 10%;
        right: 0;
        position: absolute;
        z-index: 10;
        background: url(http://img.mukewang.com/55ade1700001b38302730071.png);
        background-size: 300% 100%;
    }
    
    .birdFly {
        /*写法1*/
        -moz-animation-name: bird-slow;
        -moz-animation-duration: 400ms;
        -moz-animation-timing-function: steps(1,start);
        -moz-animation-iteration-count: infinite;

        /*写法2*/
        -webkit-animation:bird-slow 400ms steps(3) infinite;
    }
    
    @-webkit-keyframes bird-slow {
        0% {
            background-position: -0% 0%;
        }
        100% {
            background-position: -300% 0%;
        }
    }
    
    @-moz-keyframes bird-slow {
        0% {
            background-position: -0% 0%;
        }
        50% {
            background-position: -100% 0%;
        }
        75% {
            background-position: -200% 0%;
        }
        100% {
            background-position: -300% 0%;
        }
    }
    </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/jquery.transit/0.9.12/jquery.transit.min.js"></script>
</head>

<body>
    <div class="bird birdFly"></div>
    <button>点击运动</button>
</body>
<script type="text/javascript">

$("button").on("click",function(){
    /**
     * 通过transition的方式改变运动
     */
    $(".bird").transition({
    'right': "3rem",
    }, 10000,'linear',function(){
    alert("结束")
});
})

var docEl = document.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>

</html>

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 674评论 0 9
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 626评论 0 2
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 645评论 0 3
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 114评论 0 0
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 473评论 0 7