使用CSS3,GSAP和Velocity.js分别实现动画速度控制

Tweene: Speed Control 卫星环绕地球旋转的动画，通过CSS3,GSAP和Velocity库分别实现速度控制，从0.25到3倍速。

动画

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2675
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

Tweene.defaultTimeUnit = 's';
    var $rocket = $('.rocket'),
        tween = null,
        speed = 1;

Tweene.defaultDriver = 'gsap';

Tweene.set($rocket, {
        transformOrigin: '140px 25px'
    });

function animate(driver) {
        if (tween) {
            tween.pause();
        }

tween = Tweene.get($rocket, driver)
            .from({
                rotate: 0
            })
            .to({
                rotate: 360
            })
            .duration(3)
            .speed(speed)
            .easing('linear')
            .loops(-1)
            .play();
    };

$('.driverControls li').on('click', function(event) {
        var $this = $(this);
        if (!$this.is('.current')) {
            var newDriver = $this.data('driver');
            $this.parent().find('.current').removeClass('current');
            $this.addClass('current');
            animate(newDriver);
        }
        event.stopPropagation();
        event.preventDefault();
    });

$('.speedControls li').on('click', function(event) {
        var $this = $(this);
        if (!$this.is('.current')) {
            speed = $this.data('speed');
            $this.parent().find('.current').removeClass('current');
            $this.addClass('current');
            tween.speed(speed);
        }
        event.stopPropagation();
        event.preventDefault();
    });

animate('gsap');

});

编译

CSS

/* apply a natural box layout model to all elements */

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body,
.all {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Roboto", arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #454545;
    background-color: #62ABBE;
    line-height: 1.9;
}
p {
    margin: 0 0 0.7em 0;
    padding: 0;
    text-indent: 0;
}
a {
    color: #DDDDDD;
    text-decoration: none;
    outline: none !important;
}
a:hover {
    color: #FFFFFF;
    text-decoration: none;
    outline: none !important;
}
.all {
    position: relative;
    width: 100%;
    max-width: 960px;
    height: 100%;
    margin: auto;
    padding: 20px;
}
.object {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate(0, 0, 0);
    -ms-transform: translate(0, 0, 0);
    transform: translate(0, 0, 0);
    background-size: 100% 100%;
}
.rocket {
    width: 30px;
    height: 50px;
    left: 10px;
    top: 175px;
    background-image: url("http://tweene.com/skin/Default/img/rocket-03.svg");
}
.planet {
    width: 160px;
    height: 90px;
    left: 160px;
    top: 200px;
    margin-left: -80px;
    margin-top: -45px;
    background-image: url("http://tweene.com/skin/Default/img/space-planet.svg");
}
.controls {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 300px;
}
.controls .intro {
    font-family: "Roboto Condensed", arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
}
.controls ul {
    list-style: circle;
}
.controls li {
    cursor: pointer;
}
.controls li:hover {
    color: #FFFFFF;
}
.controls .current {
    color: #DDDDDD;
    font-weight: 400;
}
@media screen and (max-width: 767px) {
    .all {
        padding-left: 0;
        padding-right: 0;
    }
    .controls {
        right: auto;
        top: 500px;
        left: 10px;
    }
}

HTML

<div class="controls">
        <p class="intro">Select the animation library:</p>
        <ul class="driverControls">
            <li class="current" data-driver="gsap">GSAP</li>
            <li data-driver="transit">Transit (CSS Transitions)</li>
            <li data-driver="velocity">Velocity.js</li>
        </ul>

<p class="intro">Select the animation speed:</p>
        <ul class="speedControls">
            <li data-speed="0.25">0.25X</li>
            <li data-speed="0.50">0.5X (half speed)</li>
            <li class="current" data-speed="1">1 (normal speed)</li>
            <li data-speed="2">2X (double speed)</li>
            <li data-speed="3">3X</li>
        </ul>
    </div>
</div>

Tweene: Speed Control 卫星环绕地球旋转的动画，通过CSS3,GSAP和Velocity库分别实现速度控制，从0.25到3倍速。

动画

编辑器支持Emmet

快捷键

Tweene: Speed Control 卫星环绕地球旋转的动画，通过CSS3,GSAP和Velocity库分别实现速度控制，从0.25到3倍速。

动画

分别使用CSS3 transform、SVG animate和GSAP实现的搜索图标动画

分别使用CSS3和Web Animation API实现的黑猫奔跑动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：