Xun Li

虛懷若竹,清氣若蘭

關注科技與人文


嗨,我是黎浔,歡迎來到我的個人網誌

HTML5摇一摇(下)—如何实现签筒摇动动画

演示demo:“摇一摇,万福签

上一篇博客(HTML5摇一摇—如何判断设备摇动(上))中讲到了如何利用HTML5中的DeviceOrientationEvent和DeviceMotionEvent来实现手机摇一摇的判断,这次主要来讲如何利用CSS3实现签筒摇动的动画

半透明遮罩层

当签筒摇动动画出发时,半透明遮罩层显示出来用来凸显签筒摇动的动画

/* 半透明遮罩层 */
.cover {
    background: rgba(0, 0, 0, 0.7) no-repeat top right;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

CSS3动画关键帧

了解动画原理的人应该都知道,所谓的动画其实就是由若干个关键帧构成,当一连串的关键帧连续播放时就形成了我们所看见的动画

这里我们所用到的素材其实就是6张连续摇动的签筒所拼成的一张大图: 签筒摇动素材

实现这个动画有两个思路:

  1. 把动画分成一步,动画开始以结尾端点为起点开始执行,然后在0%,20,40,80,100执行了背景图的切换
  2. 第二种是动画分成5步,然后每一步在100%处的时候调用最后一张背景图 这里我们就拿第二种实现方法来举例

接下来我们利用CSS3中的@keyframes来定义的动画的关键帧,其中-737px -2px表明每一步动画都会往右移737像素并上移-2px

@keyframes play {
    100% {
        background-position: -737px -2px;
    }
}
/*为了兼容性考虑,可能还需要加上浏览器厂商的前缀,
例如下面给只出了webkit内核的浏览器厂商前缀,
其他的还有-moz-animation,-o-animation */
@-webkit-keyframes play {
    100% {
        background-position: -737px -2px;
    }
}

调用我们定义的CSS3关键帧

这里我们利用steps()这个函数把动画平分成5等份,每份0.8s(100%处的时候调用最后一张背景图),infinite参数则会让动画无限循环播放

.sprite {
    width: 145px;
    height: 300px;
    display: inline-block;
    overflow: hidden;
    background: url('./img/animation.png') no-repeat -2px -2px;
    animation: play 0.8s steps(5) infinite;
    -webkit-animation: play 0.8s steps(5) infinite;
}

让按钮动起来

按钮的动画用到了贝赛尔曲线来优化运动效果

cubic-bezier(x1, y1, x2, y2))本质上是一个时间函数,文档定义如下:

x1, y1, x2, y2 Are values representing the abscissas and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.

@keyframes shake {
    0% {
        transform: scaleY(1) translate(30px);
    }
    50% {
        transform: translate(-30px);
    }
    100% {
        transform: scaleY(1) translate(30px);
    }
}

/*这里用到了贝赛尔曲线来优化运动的效果*/
.shakeBtn {
    width: 76%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    animation: shake 1.2s cubic-bezier(0, 0, 0.36, 1) infinite;
}
最近的文章

为什么是React-浅谈React与jQuery的思维差异

为什么越来越多的互联网公司都在转向React.js去开发前端组件,除了性能因素外,很大一部分原因是因为用jQuery去写很复杂的DOM操作,后期代码会变得越来越难维护。现在大部分的 Web APP 都有一个特点:后端的Model层很简单,但是随着产品业务的拓展前端View却变得越来越复杂,这个时候如果还在用纯jQuery去写DOM操作将会变得很不直观,代码也会变的很臃肿进而变的越来越难以维护,下面就拿一个微博发送框的简单例子来展示一些React的简洁与强大。 注意: Rea...…

jQueryReact继续阅读
更早的文章

HTML5摇一摇(上)—如何判断设备摇动

刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口演示demo:“摇一摇,万福签”什么是重力感应说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实际方向。手机中的方位轴在W...…

HTML5微信摇一摇继续阅读