利用animation的延迟实现复杂动画

阅读数:52 评论数:0

分类

html/css/js

正文

1、html

<div class="container">
    <div class="ball"></div>
    <input type="range" min="0" max="1" step="0.01" />
</div>

2、css

body {
    display: flex;
    justify-content: center;
}

.container {
    margin-top: 30px;
}

.ball {
    --delay: 0s;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff0000;
    margin-bottom: 50px;
    animation: move 1s var(--delay) linear forwards paused;
    /* animation-play-state: running; */
    /* animation-play-state: paused; */
}

@keyframes move {
    50% {
        transform: translate(100px) scale(1.5);
    }

    100% {
        transform: translate(200px) scale(1);
    }
}

3、javascript

let inp = document.querySelector('input'),
ball = document.querySelector('.ball'),
cal = () => ball.style.setProperty('--delay', `-${inp.value}s`);

inp.oninput = cal;
cal();

css3动画@keyframes和animation

一、概述 html动画基本可以分为两类：css动画和js动画。css动画只能去做数值类的样式变化，遇到非数据类的变化，比如页面内容的变化，就需要使用js动画。二、@keyframes @keyfra

threejs 动画系统

一、动画片段 animation clips 每个animationClip通常保存3D动画对象某个活动的数据。举个例子，假如mesh是一个角色，可能有一个AnimationClip实现步行循

requestAnimationFrame

一、概述实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的

requestAnimationFrame(请求动画帧)

一、概述在Web应用中，实现动画效果的方法有很多，js中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中可以使用canvas，除

requestIdleCallback

一、概述当关注用户体验，不希望因为一些不重要的任务（如统计上报）导致用户感觉到卡顿的话，就应该考虑使用requestIdleCallback。因为requestIdleCallback回调的执行的前

THREE.Mesh,THREE.AnimationObjectGroup,THREE.Group

一、THREE.Mesh THREE.Mesh 是 Three.js 中的 3D 模型或几何体对象，它将几何数据（geometry）与材质（material）结合在一起，形成可以渲染的 3D 对象。

秒吧学习