HTML5/GSAP遥控玩具车动画

遥控器和电子玩具车，带启动刹车和天线摇摆动画。

html5, toy

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    transform,
    point,
    paddle = select('.paddle'),
    controller = select('.controller'),
    wholeCar = select('.wholeCar'),
    bubbleCar = select('.bubbleCar'),
    wire = select('.wire'),
    ball = select('.ball'),
    wirePathStub = "M0,150c0,0,0,-75,"

CustomEase.create("return", "M0,0 C0,0 0.162,1 0.4,1 0.918,1 1,0 1,0");
CustomEase.create("paddleEase", "M0,0 C0.33,0.432 0.548,0.564 0.9,1 0.95,0.808 1,0 1,0");

TweenMax.set('svg', {
    visibility: 'visible'
})

TweenMax.set(ball, {
    svgOrigin: '400 450',
    transformOrigin: '50% 0%'
})

TweenMax.set(wire, {
    x: 7,
    y: 60
})

TweenMax.set(bubbleCar, {
    //x:200,
    y: 130
})
TweenMax.set(wholeCar, {
    x: 260
})
TweenMax.set(controller, {
    x: 300,
    y: 319
})

var tl = new TimelineMax({
    onUpdate: followBall,
    repeat: -1
});
tl.from(wholeCar, 2, {
        x: 0,
        ease: Expo.easeIn
    })
    .to(paddle, 2, {
        x: 8,
        ease: 'paddleEase'
    }, '-=2')
    .to(wholeCar, 0.1, {
        rotation: 3,
        ease: 'return',
        transformOrigin: '100% 95%'
    })
    .fromTo(ball, 2, {
        rotation: -0
    }, {
        rotation: -22,
        ease: Expo.easeIn

}, '-=2.1')
    .to(ball, 2, {
        rotation: 0,
        ease: Elastic.easeOut.config(1, 0.3)

}, '-=0.1')

.to(wholeCar, 1, {
        x: 580,
        ease: Expo.easeIn
    })
    .to(paddle, 0.8, {
        x: 8,
        ease: 'paddleEase'
    }, '-=1')
    .to(wholeCar, 0.1, {
        rotation: 3,
        ease: 'return',
        transformOrigin: '100% 95%'
    })

.fromTo(ball, 1, {
        rotation: -0
    }, {
        rotation: -42,
        ease: Expo.easeIn

}, '-=1.1')
    .to(ball, 2, {
        rotation: 0,
        ease: Elastic.easeOut.config(1, 0.3)

}, '-=0.1')

.to(wholeCar, 1, {
        x: 200,
        ease: Expo.easeIn
    })
    .to(paddle, 1, {
        x: -8,
        ease: 'paddleEase'
    }, '-=1')
    .to(wholeCar, 0.1, {
        rotation: -3,
        ease: 'return',
        transformOrigin: '0% 95%'
    })
    .fromTo(ball, 1, {
        rotation: -0
    }, {
        rotation: 42,
        ease: Expo.easeIn

}, '-=1.1')
    .to(ball, 2, {
        rotation: 0,
        ease: Elastic.easeOut.config(1, 0.3)

}, '-=0.1')

.to(wholeCar, 1, {
        x: 0,
        ease: Expo.easeIn
    })
    .to(paddle, 1, {
        x: -8,
        ease: 'paddleEase'
    }, '-=1')
    .to(wholeCar, 0.2, {
        rotation: -4,
        ease: 'return',
        transformOrigin: '0% 95%'
    })
    .fromTo(ball, 1, {
        rotation: -0
    }, {
        rotation: 42,
        ease: Expo.easeIn

}, '-=1.2')
    .to(ball, 2, {
        rotation: 0,
        ease: Elastic.easeOut.config(1, 0.3)

}, '-=0.2')

function followBall() {

transform = CSSTransform.get('.follower').align({
        point: "50% 50%",
        element: '.ball',
        elementPoint: "50% 50%",
        duration: 0
    });
    point = transform.vars.css;
    var path = wirePathStub + point.x + ',' + (point.y - 150);

wire.setAttribute('d', path)

}

//ScrubGSAPTimeline(tl);

编译

CSS

HTML

遥控器和电子玩具车，带启动刹车和天线摇摆动画。

html5, toy

编辑器支持Emmet

快捷键

遥控器和电子玩具车，带启动刹车和天线摇摆动画。

html5, toy

HTML5/GSAP很棒的一款新年快乐动画

HTML5 GSAP星球大战BB8机器人逃亡动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：