Javascript和tween.js实现钟表

最新推荐文章于 2022-11-28 17:11:33 发布
最新推荐文章于 2022-11-28 17:11:33 发布
阅读量252 收藏
点赞数
文章标签： javascript css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42274795/article/details/121204306
版权

最近在从新学习JS的一些基础的方法，发现了Tween.js写了一点东西，直接上代码。

时钟代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <script src="tween.js"></script>
    <script src="moveTw.js"></script>

    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        #clock-wrap {
            width: 120px;
            height: 120px;
            border: 2px solid #fff;
            background: #eeeded;
            border-radius: 50%;
            box-shadow: 0 0 5px #000;
            padding: 10px;
            margin: 200px auto;
        }
        
        #clock {
            width: 110px;
            height: 110px;
            background: url(./imgs/圆盘.png) no-repeat center center;
            border: 5px solid #e15671;
            border-radius: 50%;
        }
        
        #box {
            position: relative;
        }
        
        .dot {
            width: 7px;
            height: 7px;
            border-radius: 3px;
            background: #fff;
            position: absolute;
            left: 52px;
            top: 52px;
        }
        
        .hour {
            width: 7px;
            height: 35px;
            background-color: #fff;
            border-radius: 3px;
            position: absolute;
            left: 52px;
            top: 21px;
            transform-origin: center 33px;
        }
        
        .min {
            width: 4px;
            height: 44px;
            background: #fff;
            border-radius: 3px;
            position: absolute;
            left: 53px;
            top: 15px;
            transform-origin: center 42px;
        }
        
        .sec {
            width: 40px;
            height: 40px;
            background: url(./imgs/指针1.png) no-repeat center center;
            position: absolute;
            left: 18px;
            top: 15px;
            transform-origin: 37px 39px;
            z-index: 999;
        }
        
        #lattice-list {
            position: relative;
        }
        
        .lattice {
            width: 2px;
            height: 6px;
            background: #fff;
            position: absolute;
            left: 55px;
            transform-origin: left 55px;
        }
    </style>
</head>

<body>
    <div id="clock-wrap">
        <div id="clock">
            <ul id="lattice-list"></ul>
            <div id="box">
                <div class="dot"></div>
                <div class="hour"></div>
                <div class="min"></div>
                <div class="sec"></div>
            </div>
        </div>
    </div>
    <script>
        var latticeList = document.querySelector('#lattice-list')
        var hourEle = document.querySelector('.hour')
        var minEle = document.querySelector('.min')
        var secEle = document.querySelector('.sec')

        var html = ''
        for (var i = 0; i < 12; i++) {
            html += '<li class="lattice" style="transform:rotate(' + i * 30 + 'deg)"></li>'
        }
        latticeList.innerHTML = html
        clock()

        function clock() {
            var date = new Date()
            var H = date.getHours()
            var M = date.getMinutes()
            var S = date.getSeconds()
            var Ms = date.getMilliseconds() //毫秒
            console.log(H, M, S, Ms);

            var Hdeg = H * 30 + M / 60 * 30 //不足一小时的度数
            var Mdeg = M * 6 + S / 60 * 6 //不足一分钟
            var Msdeg = S * 6 + 45 + Ms / 1000 * 6 //每一毫秒的度数


            // hourEle.style.transform = 'rotate(' + H * 30 + 'deg)' //只指向整小时
            // minEle.style.transform = 'rotate(' + M * 6 + 'deg)' //只指向整分
            // secEle.style.transform = 'rotate(' + (S * 6 + 45) + 'deg)'//每一秒走的度数
            hourEle.style.transform = 'rotate(' + Hdeg + 'deg)'
            minEle.style.transform = 'rotate(' + Mdeg + 'deg)'
            secEle.style.transform = 'rotate(' + Msdeg + 'deg)'
        }
        //定时器
        setInterval(clock, 30)
    </script>
</body>

</html>

封装函数：

 // css方法
 function css(el, attr, val) {
     if (arguments.length == 2) {
         return parseFloat(getComputedStyle(el)[attr])
     } else {
         el.style[attr] = val + 'px'
     }
 }

 //调用Tween 方法
 function moveFn(op) {
     if (!op.el) {
         alert('请传入运动元素')
         return;
     }
     if (!op.attrs) {
         alert('请传入运动属性')
         return;
     }
     var el = op.el
     var attrs = op.attrs
     var duration = op.duration || 1000
     var type = op.type || 'linear'


     var delay = 1000 / 60
     var t = 0
     var b = {}
     var c = {}
     for (var attr in attrs) {
         b[attr] = css(el, attr)
         c[attr] = attrs[attr] - b[attr]
     }

     var d = Math.ceil(duration / delay)
     var _this = this
     clearInterval(this.timer)
     this.timer = setInterval(function() {
         t++
         for (var item in b) {
             var value = Tween[type](t, b[item], c[item], d)
             console.log(value);
             css(el, item, value)
         }

         if (t == d) {
             clearInterval(_this.timer)
             op.cb && op.cb()
         }
     }, delay)
 }

Tween.js方法

let Tween = {
    linear: function(t, b, c, d) { //匀速
        return c * t / d + b;
    },
    easeIn: function(t, b, c, d) { //加速曲线
        return c * (t /= d) * t + b;
    },
    easeOut: function(t, b, c, d) { //减速曲线
        return -c * (t /= d) * (t - 2) + b;
    },
    easeBoth: function(t, b, c, d) { //加速减速曲线
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b;
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeInStrong: function(t, b, c, d) { //加加速曲线
        return c * (t /= d) * t * t * t + b;
    },
    easeOutStrong: function(t, b, c, d) { //减减速曲线
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeBothStrong: function(t, b, c, d) { //加加速减减速曲线
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b;
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    elasticIn: function(t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
        if (t === 0) {
            return b;
        }
        if ((t /= d) == 1) {
            return b + c;
        }
        if (!p) {
            p = d * 0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    elasticOut: function(t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
        if (t === 0) {
            return b;
        }
        if ((t /= d) == 1) {
            return b + c;
        }
        if (!p) {
            p = d * 0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
    },
    elasticBoth: function(t, b, c, d, a, p) {
        if (t === 0) {
            return b;
        }
        if ((t /= d / 2) == 2) {
            return b + c;
        }
        if (!p) {
            p = d * (0.3 * 1.5);
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        }
        return a * Math.pow(2, -10 * (t -= 1)) *
            Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
    },
    backIn: function(t, b, c, d, s) { //回退加速（回退渐入）
        if (typeof s == 'undefined') {
            s = 1.70158;
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    backOut: function(t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 3.70158; //回缩的距离
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    backBoth: function(t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 1.70158;
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    },
    bounceIn: function(t, b, c, d) { //弹球减振（弹球渐出）
        return c - Tween['bounceOut'](d - t, 0, c, d) + b;
    },
    bounceOut: function(t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b;
        } else if (t < (2 / 2.75)) {
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
        } else if (t < (2.5 / 2.75)) {
            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
        }
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
    },
    bounceBoth: function(t, b, c, d) {
        if (t < d / 2) {
            return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
        }
        return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
    }
}

最后结果：
在这里插入图片描述

代码小菜鸟00
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解tween.js的使用教程
ddooo_liu的博客
07-24 1366
本篇文章主要介绍了详解tween.js的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 前面的话 TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&amp;CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。本文将详细介绍tween.js的使用  概述 tween.js允许以平滑的方式修改元素的属性值。只需要告诉t...
javascript制作钟表
Yujun.的博客
05-12 2042
JAVAscript制作钟表 本文用js制作一款简单的钟表联系 代码如下 有问题欢迎大家交流 欢迎各位大佬指正。 HTML部分 //创建钟表 <body> <div class="box"> <div class="clock" id="ck"> <div id="hour"></div> <...
android tween动画平移怎么设置时间,详解Android动画之Tween Animation 补间动画
weixin_29928971的博客
05-25 113
Android动画分为Tween动画和Frame动画，上一节通过一个实例介绍了Frame动画，本节将介绍Tween动画。Tween动画通过场景里的对象不断的进行图片的变换，比如平移、渐变、缩放、旋转等来产生动画效果；Android的animation由四种类型组成:在XML文件中：alpha 渐变透明度动画效果scale 渐变尺寸伸缩动画效果translate 画面转换位置移动动画效果rotate...
详解tween.js 补间动画中文使用指南
細水、長流√的专栏
05-17 2728
补间(动画)是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。 例如，position对象拥有x和y两个坐标: 1 var position = { x: 100, y: 0 } 如果你想将x坐标的值从100变成200，你应该这么做： 1 2 3 4 5 // 首先为位置创建一
tween.js详解
github_37360787的博客
02-02 9402
demo演示：点击打开链接；演示地址2：点击打开链接；轮播图demo演示：点击打开链接github 地址：https://github.com/fuyz/tween.js先贴下基础知识,然后在解释如何使用Tween.js：1.第三方动画 tween.js 2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度) 缓动函数:1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic...
android tween动画平移怎么设置时间,android Tween Animation属性设置方法实例
weixin_33410914的博客
05-25 133
在Android开发中，Animation是用来给控件制作效果的。大多数的控件都可以用这个类，这个类包含了4种基本动作，分别为移动，旋转，淡入淡出，缩放。在使用Animation时，可以在.java文件中用java代码对其进行设置，这样的优点是可以方便调试程序效果；另外一种方法就是在xml中对控件的属性做设置，好处是代码的重用性比较高，缺点是不方便调试。一、在java代码中使用Animation在...
TweenJS2022最新版本（tween.js）
04-04
2022年的最新版本（tween.js）提供了更多优化和新特性，以适应不断发展的Web开发需求。这个库使得开发者可以轻松地在网页上实现对象属性的平滑过渡，如位置、大小、透明度等。 缓动（Tween）是一种在两个值之间平滑...
使用ArcGIS JS API与Tween.js实现图层闪烁动画效果（源码）.zip
03-19
Tween.js是一个轻量级的JavaScript库，主要用于实现对象属性的平滑过渡动画。它可以处理各种属性的缓动（tweening），包括位置、颜色、透明度等，非常适合用于创建视觉效果，如我们在这里讨论的图层闪烁。 要实现...
Tween.jsJavaScript库
02-04
Tween.jsJavaScript库
前端JavaScript运动框架Tween.js
11-12
前端JavaScript运动框架Tween.js
JS 中 Tween 的使用
04-06
NULL 博文链接：https://ymx.iteye.com/blog/1541249
Tween:tween.js
04-30
Tween.js简介各类缓动算法，效果演示参见：如何使用参见：其中animation.js是新增，为了更简单的使用这些缓动算法，语法如下：Math.animation(form, to, duration, easing, callback);其中：form和to是必须参数，...
用JS获取当前的时间
热门推荐
安宁的小虎牙
04-21 1万+
用JS获取当前时间与Date的基础讲解
tween.js简介
淡定九号的博客
11-28 9622
tweenjs 动画
用javaScript实现钟表功能
wangjianq_bobo的博客
10-27 1020
用JavaScript实现简单的钟表功能，效果如下： 注：本代码只在Chrome浏览器中运行过，没有在IE浏览器中做过检测，给读者带来的不便敬请谅解。 var body_ = document.getElementsByTagName("body"); body_[0].style.background = 'black
tween.js的使用方法
haha-zhao的博客
05-27 3565
tween.js是一款可生成平滑动画效果的js动画库。 Tween.缓动函数名.缓动效果名即tween.js的四个参数为(t,b,c,d); t:代表当前已经运动的时间 b:代表初始值 c:代表变化量 d:代表持续时间 代码入下： ...
JS实现实时钟表
小小鸟的博客
10-22 1457
JS实现实时钟表 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生JS实现实时钟表</title> <style> .clock { width: 600...
js使用tween动画（Tween.js）
蒙双眼看世界
04-04 7072
itween是个非常强大的动画库，或者它只是个动画脚本，效果棒。
js实现动态钟表案例
fengshengsc的博客
03-25 620
js实现动态钟表（代码附上）
three.js 使用tween.js 实现完整飞线动画
最新发布
05-09
是的，three.js和tween.js可以一起使用，实现复杂的动画效果，包括飞线动画。以下是一个简单的例子，演示了如何使用three.js和tween.js创建一条飞线动画： ```javascript // 创建three.js场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建飞线路径 var curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-10, 0, 0), new THREE.Vector3(-5, 5, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(5, -5, 0), new THREE.Vector3(10, 0, 0) ]); // 创建飞线材质 var material = new THREE.LineBasicMaterial({ color: 0xffffff }); // 将飞线路径转换为几何体 var geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints(50); // 创建飞线网格 var line = new THREE.Line(geometry, material); scene.add(line); // 创建飞线动画 var tween = new TWEEN.Tween({t:0}) .to({t:1}, 5000) // 5秒钟 .onUpdate(function() { // 根据tween的进度计算飞线的位置 var position = curve.getPoint(this.t); // 更新飞线网格的位置 line.position.copy(position); }) .start(); // 渲染场景 function render() { requestAnimationFrame(render); TWEEN.update(); // 更新tween动画 renderer.render(scene, camera); } render(); ``` 在这段代码中，我们首先创建了一个three.js场景、相机和渲染器。然后，我们创建了一个CatmullRomCurve3曲线，用于定义飞线路径，并将其转换为three.js几何体。接下来，我们创建了一个TWEEN.Tween对象，将其起始值设置为0，结束值设置为1，表示飞线动画的进度。在Tween对象的 onUpdate 回调函数中，我们根据飞线路径计算当前进度对应的位置，并将飞线网格的位置更新为该位置。最后，我们创建了一个渲染函数，用于在每帧更新Tween动画和渲染场景。 希望这个例子可以帮助你了解如何使用three.js和tween.js创建飞线动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值