7.3_时间轴扭曲函数

最新推荐文章于 2025-08-16 14:38:14 发布
原创 最新推荐文章于 2025-08-16 14:38:14 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了7.3章节中的时间轴扭曲函数，详细阐述了其原理和应用。

7.3_时间轴扭曲函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>时间轴扭曲函数</title>
        <style>
            body{
                background: #fff;
            }
            #canvas{
                background: #eee;
            }
            #controls{
                position: absolute;
                left: 25px;
                top: 25px;
            }
            #direction{
                position: absolute;
                left:25%;
                top: 50%;
            }
        </style>
    </head>
    <body>
        <div id="controls">
            <input type="radio" name="sport" id="linearRadioButton" checked>均速运动<br />
            <input type="radio" name="sport" id="easeInRadioButton" />缓入运动<br />
            <input type="radio" name="sport" id="easeOutRadioButton" />缓出运动<br />
            <input type="radio" name="sport" id="easeInOutRadioButton" />缓入缓出运动<br />
            <input type="radio" name="sport" id="elasticRadioButton" />弹簧运动<br />
            <input type="radio" name="sport" id="bounceRadioButton" />弹跳运动<br />
        </div>
        <div id="direction">
            <input type="button" value="左边" id="leftButton"/ style="margin-right: 20px;">
            <input type="button" value="右边" id="rightButton"/>

        </div>
        <canvas id="canvas" width="800" height="600"></canvas>
    </body>
    <!-- 精灵对象 -->
    <script>
        var Sprite = function(name,painter,behaviors){
            if(name !== undefined){ this.name = name; }
            if(painter !== undefined){ this.painter = painter; }

            this.top = 0;
            this.left = 0;
            this.width = 10;
            this.height = 10;
            this.velocityX = 0;
            this.velocityY = 0;
            this.visible = true;
            this.animating = false;
            this.behaviors = behaviors || [];

        }

        Sprite.prototype = {
            paint:function(context){
                if(this.painter !== undefined && this.visible){
                    this.painter.paint(this,context);
                }
            },
            update:function(context,time){
                for(var i=0;i<this.behaviors.length;i++){
                    this.behaviors[i].execute(this,context,time);
                }
            }
        }
    </script>
    <!-- 重构后的支持时间轴扭曲功能的AnimationTimer对象（动画计时器） -->
    <script>
        StopWatch = function(){};
        StopWatch.prototype = {
            startTime:0,
            running:false,
            elapsed:undefined,

            start:function(){
                this.startTime = +new Date();
                this.running = true;
                this.elapsed = undefined;
            },
            stop:function(){
                this.elapsed = (+new Date()) - this.startTime;
                this.running = false;
            },
            isRunning:function(){
                return this.running;
            },
            getElapsedTime:function(){
                if(this.isRunning()){
                    return (+new Date()) - this.startTime;
                }else{
                    return this.elapsed;
                }
            },
            reset:function(){
                this.elapsed = 0;
            }
        };

        AnimationTimer = function(duration,timeWarp){
            if(duration !== undefined){
                this.duration = duration;
            };
            if(timeWarp !== undefined){
                this.timeWarp = timeWarp;
            }
            this.stopWatch = new StopWatch();
        }

        AnimationTimer.prototype = {
            default_elastic_passes:3,
            start:function(){
                this.stopWatch.start();
            },
            stop:function(){
                this.stopWatch.stop();
            },
            getElapsedTime:function(){
                var elapsedTime = this.stopWatch.getElapsedTime();
                var percentComplete = elapsedTime/this.duration;

                if(!this.stopWatch.running){
                    return undefined;
                };
                if(this.timeWarp == undefined){
                    return elapsedTime;
                };
                //console.log(this.timeWarp);
                return elapsedTime*(this.timeWarp(percentComplete)/percentComplete);
            },
            isRunning:function(){
                return this.stopWatch.isRunning();
            },
            isOver:function(){
                return this.stopWatch.getElapsedTime() > this.duration;
            },
            //运动形式
            makeEaseIn:function(strength){  //缓入动画
                return function (percentComplete){
                    console.log('进入缓入动画了');
                    return Math.pow(percentComplete,strength*2)
                }
            },
            makeEaseOut:function(strength){
                return function(percentComplete){  //缓出动画
                    console.log('进入缓出动画了');
                    return 1-Math.pow(1-percentComplete,strength*2);
                };
            },
            makeEaseInOut:function(){  //缓入缓出动画
                return function(percentComplete){  //第一个return是timeWarp函数
                    console.log('进入缓入缓出动画了');
                    return percentComplete - Math.sin(percentComplete*2*Math.PI)/(2*Math.PI);
                };
            },
            makeElastic:function(passes){ //弹簧运动
                var passes = passes || this.default_elastic_passes;
                return function(percentComplete){
                    console.log('进入弹簧运动了');
                    return ((1-Math.cos(percentComplete*Math.PI*passes))*(1-percentComplete))+ percentComplete;
                };
            },
            makeBounce:function(bounces){ //弹跳运动
                var fn = this.makeElastic(bounces);
                return function(percentComplete){
                    console.log('进入弹跳运动了');
                    percentComplete = fn(percentComplete);
                    return percentComplete <=1 ?percentComplete:2-percentComplete;
                }
            },
            makeLinear:function(){  //匀速运动
                return function(percentComplete){
                    console.log('进入匀速运动了');
                    return percentComplete;
                }
            }
        };
    </script>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var linearRadioButton = document.getElementById('linearRadioButton');
        var easeInRadioButton = document.getElementById('easeInRadioButton');
        var easeOutRadioButton = document.getElementById('easeOutRadioButton');
        var easeInOutRadioButton = document.getElementById('easeInOutRadioButton');
        var elasticRadioButton = document.getElementById('elasticRadioButton');
        var bounceRadioButton = document.getElementById('bounceRadioButton');

        var leftButton = document.getElementById('leftButton');
        var rightButton = document.getElementById('rightButton');

        var push_animation_duration = 3600;
        var board_left = 20;
        var board_top = canvas.height - 50;
        var board_width = canvas.width-40;
        var board_height = 10;

        var ball_radius = 15;
        var ball_velocityX =100;

        var arrow ;

        var pushAnimationTimer  = new AnimationTimer(push_animation_duration);

        //返回的是时间扭曲函数
        var linear = pushAnimationTimer.makeLinear();
        var easeIn = pushAnimationTimer.makeEaseIn(1);
        var easeOut = pushAnimationTimer.makeEaseOut(1);
        var easeInOut = pushAnimationTimer.makeEaseInOut();
        var elastic = pushAnimationTimer.makeElastic(5);
        var bounce = pushAnimationTimer.makeBounce(5);

        //绘制器
        var boardPainter = {
                board_fillStyle:'darkblue',
                board_strokeStyle:'rgb(0,0,0,)',
                paint:function(board,context){
                    context.save();
                    context.beginPath();
                    context.lineWidth = 2;
                    context.fillStyle = this.board_fillStyle;
                    context.strokeStyle = this.board_strokeStyle;
                    context.shadowColor = 'rgba(0,0,0,0.5)';
                    context.shadowOffsetX = 4;
                    context.shadowOffsetY = 4;
                    context.shadowBlur = 8;
                    context.fillRect(board.left,board.top,board.width,board.height);
                    context.restore();
                }
            };
        var ballPainter = {
                ball_fill_style:'rgb(255,255,0)',
                ball_stroke_style:'rgb(0,0,0,0.4)',

                paint:function(ball,context){
                    context.save();
                    context.shadowColor = undefined;
                    context.lineWidth = 2;
                    context.fillStyle = this.ball_fill_style;
                    context.strokeStyle = this.ball_stroke_style;

                    context.beginPath();
                    context.arc(ball.left,ball.top,ball.radius,0,Math.PI*2,false);
                    context.clip();
                    context.fill();
                    context.stroke();
                    context.restore();
                }
            };
        //小球行为对象
        moveBall = {
            lastTime:undefined,
            resetBall:function(){
                ball.left =  board_left;
                ball.top = board_top - ball_radius;
            },
            updatePosition:function(elapsed){

                if(arrow == 'left'){
                    ball.left -= ball.velocityX *elapsed/1000;
                }else{
                    ball.left += ball.velocityX *elapsed/1000;
                }
            },
            execute:function(ball,contxet,time){
                var animationElapsed = pushAnimationTimer.getElapsedTime();
                var elapsed;
                if(pushAnimationTimer.isRunning()){
                    //console.log('进来了');
                    if(this.lastTime !== undefined ){  //点击后第一个运行时this.lastTime没有赋值所以做如下处理
                        elapsed = animationElapsed - this.lastTime;
                        console.log('elapsed:'+elapsed);
                        this.updatePosition(elapsed);
                        if(isBallOnLedge()){ //球在板上
                            if(pushAnimationTimer.isOver()){
                                console.log('球没掉下去，时间到了');
                                pushAnimationTimer.stop();
                            }
                        }else{ //球掉下去了
                            console.log('球掉下去了')
                            pushAnimationTimer.stop();
                            this.resetBall();
                        }
                    }
                }
                this.lastTime = animationElapsed;
            }
        }
        //精灵
        var board = new Sprite('board',boardPainter);
        var ball = new Sprite('ball',ballPainter,[moveBall]);
        var startTime = undefined;



        //初始化
        board.left = board_left;
        board.top = board_top;
        board.width = board_width;
        board.height = board_height;

        ball.radius = ball_radius;
        ball.left =  board_left;
        ball.top = board_top - ball_radius;
        ball.velocityX = ball_velocityX;

        startTime = +new Date();
        animate(startTime);

        //函数
        function animate(time){
            time = +new Date();
            context.clearRect(0,0,canvas.width,canvas.height);

            updateSprites(time);
            paintSprites();

            window.requestAnimationFrame(animate);
        }
        function updateSprites(time){
            ball.update(context,time);
        }
        function paintSprites(){
            board.paint(context);
            ball.paint(context);
        }
        function isBallOnLedge(){ //判断球是不是还在板上
            return ball.left>board_left && ball.left<(board_left+board_width);
        }

        leftButton.onclick = function(){

            if(!pushAnimationTimer.isRunning()){
                arrow = 'left';
                pushAnimationTimer.start();
                console.log('点击了左边开始按钮');
            }
        }
        rightButton.onclick = function(){
            if(!pushAnimationTimer.isRunning()){
                arrow = 'right';
                pushAnimationTimer.start();
                console.log('点击了右边开始按钮');
            }
        }
        //事件
        linearRadioButton.onchange = function(){
            pushAnimationTimer.timeWarp = linear;
        };
        easeInRadioButton.onchange = function(){
            pushAnimationTimer.timeWarp = easeIn;
        };
        easeOutRadioButton.onchange = function(){
            pushAnimationTimer.timeWarp = easeOut;
        };
        easeInOutRadioButton.onchange = function(){
            pushAnimationTimer.timeWarp = easeInOut;
        };
        elasticRadioButton.onchange = function(){
            pushAnimationTimer.timeWarp = elastic;
        };
        bounceRadioButton.onchange = function(){
            pushAnimationTimer.timeWarp = bounce;
        };

    </script>
</html>
【ACM_2023】3D Gaussian Splatting for Real-Time Radiance Field Rendering
zik的博客
06-28 2517
【Project】引入了三个关键要素，能够在保持有竞争力的训练时间的同时实现最先进的视觉质量，并且重要的是允许以 1080p 分辨率进行高质量实时（≥ 30 fps）新颖的视图合成。首先，从相机校准期间产生的稀疏点开始，用 3D 高斯表示场景，保留连续体积辐射场的所需属性以进行场景优化，同时避免在空白空间中进行不必要的计算；其次，对 3D 高斯进行交错优化/密度控制，特别是优化各向异性协方差以实现场景的准确表示；第三，开发了一种快速可见性感知渲染算法，该算法支持各向异性泼溅，既加速训练又允许实时渲染。
ABAP 7.50 的 CDS Table Function：用 AMDP 把复杂逻辑真正下推到 HANA
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
12-10 46
摘要： ABAP 7.50 引入的 CDS Table Function 与 AMDP Function 组合，弥补了 ABAP CDS 在代码下推(code pushdown)的关键能力。该特性允许在 CDS 数据模型中嵌入由数据库原生逻辑实现的表函数，并像普通 CDS View 一样被 Open SQL 和其他 CDS 视图消费。开发时需在 CDS DDL 中定义表函数结构，并通过 AMDP 类中的 SQLScript 实现具体逻辑，最后通过 Open SQL 调用。这一方案解决了复杂计算下推至数据库层
动态时间扭曲（DTW）：这个包实现了动态时间扭曲（DTW）。-matlab开发
05-30
DTW 在 Matlab 和 C/MEX 中实现。 C/MEX 函数非常快。 我们使用的算法是来自 wiki 的标准算法： http : //en.wikipedia.org/wiki/Dynamic_time_warping 包里有demo。 要使用，只需调用： d=dtw(s,t,w) 或 d=dtw_c(s,t,w)
简单的时间轴函数
qq_31123547的博客
11-09 593
function settime (obj, data,timestop ,usetime) { function fun () { obj.animate( data , usetime) } setTimeout( fun,timestop ) } settime($(".check"),{width:"10px",opacity:"0"},3000,3000);
css图形化理解--扭曲函数skew()
Eagler_Step
10-07 1948
是CSS中的一个2D变换方法，它用于对元素沿X轴、Y轴进行倾斜变换。其中，angle表示倾斜的角度。
动态时间轴特效（html,js等）完整代码
12-05
实现的很美观。效果不错，动态时间轴特效 完整html，css ，js 非原创，资源分享，一起学习
动态时间归整/规整/弯曲(Dynamic time warping,DTW)
Hencoff的专栏
06-12 1万+
http://blog.sina.com.cn/s/blog_4b700c4c0102e1gz.html 动态时间规整DTW   在日常的生活中我们最经常使用的距离毫无疑问应该是欧式距离，但是对于一些特殊情况，欧氏距离存在着其很明显的缺陷，比如说时间序列，举个比较简单的例子，序列A：1,1,1,10,2,3，序列B：1,1,1,2,10,3，如果用欧氏距离，也就是
8、铁路齿轮箱轴承剩余使用寿命（RUL）的机器学习估计
m9n0o的博客
07-08 79
本文探讨了使用机器学习技术估计铁路齿轮箱轴承剩余使用寿命（RUL）的方法。通过数据收集、探索性数据分析、异常值处理、模型训练、阈值设置以及RUL计算等多个步骤，构建了一个完整的RUL预测体系。研究结合了多种算法，如一类支持向量机、多项式和指数回归、PELT变化点检测以及Savitzky-Golay滤波器，以提高预测准确性并降低维护成本。该方法可根据具体设备和数据灵活调整，适用于预测性维护领域。
8、时间序列机器学习入门
echo99的专栏
08-16 52
本文介绍了时间序列机器学习的基础知识和实践方法，包括ROCKET变换和Shapelets的Python实现，时间序列的预处理步骤，以及时间序列机器学习的应用与问题类型。同时涵盖了机器学习的历史发展、工作流程、交叉验证技术、误差指标、时间序列比较方法，以及常见的机器学习算法如ARIMA、LSTM、随机森林和支持向量机等内容，旨在为读者提供全面的时间序列机器学习入门指南。
数学与引力波：时空涟漪的数学描述
AI天才研究院
01-21 1756
数学与引力波：时空涟漪的数学描述 关键词 引力波 数学描述 时空涟漪 数学模型 时空扭曲 背景介绍 摘要 本文将深入探讨引力波的概念
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
wxDraw一个轻量级的微信小程序2d动画绘制库
08-10
wxDraw 一个轻量级的微信小程序2d动画绘制库
Linux：常用时间函数
Linux
08-27 3373
参考链接：（大神讲的真好） https://www.cnblogs.com/linuxbug/p/4887006.html 下面涉及到的函数全部都可以在：man 3 ctime 中找到。 1.time: 头文件: #include <time.h> 函数原型: time_t time(time_t *t); 函数描述: returns the time as the nu...
前端开发中常用的时间处理函数
baiqiangdoudou的博客
08-18 506
前端开发常用的时间函数处理
matlab中怎么求调整时间,求助：在MATLAB里如何输入时间序列中的时间
weixin_42663213的博客
03-22 1158
该楼层疑似违规已被系统折叠隐藏此楼查看此楼function[logRS,logERS,V]=RSana(x,n,method,q)%Syntax:[logRS,logERS,V]=RSana(x,n,method,q)%____________________________________________%% Performs R/Sanalysis on a time series.%% l...
【arduino】时间相关函数
域名baixiao.blog.youkuaiyun.com
09-18 2024
返回值：单片机上电或复位后到现在的时间，单位为ms，50天后复位为0，重新计算。返回值：单片机上电或复位后到现在的时间，单位为us。num:延时时间，单位微秒，最大值16383。延时函数：delayMicroseconds(num)读取单片机启动后运行的时间，单位毫秒。读取单片机启动后运行的时间，单位微秒。num：延时时间：单位毫秒。延时函数：delay（num）系统时间：micros()系统时间：milis()
动态时间规整算法_如何使用动态时间规整算法进行语音识别
weixin_26632369的博客
07-22 1148
动态时间规整算法Speech recognition is the process of analyzing audio signals to identify the words spoken by the speaker. Speech recognition has been part of our lives since 1952. We all use this technology i...
衡量曲线相识度的指标
xiaoxifei的专栏
10-20 1万+
目录 方法总论 1. 基于点匹配的方法 2. 基于形状的方法 方法总论 衡量两条曲线f1(x,y)f_1(x,y)f1​(x,y)与f2(x,y)f_2(x,y)f2​(x,y)的相似度，从传统特征工程的角度来讲，思路无外乎是设计不同的特征空间，将曲线映射到特征空间里面再进行相似度的对比，这种相似度的对比实际上就是在特征空间里面的欧式距离了。目前而言，常用的设计思路主要是出于两个方面设计，一个是从...
语音识别：时间序列的动态扭曲相似度（DTW）算法
热门推荐
gongdiwudu的专栏
03-12 1万+
在时间序列分析中，动态时间扭曲 (DTW) 是一种用于测量两个时间序列之间相似性的算法，这两个时间序列的速度可能不同。例如，即使一个人走得比另一个人快，或者在观察过程中出现加速和减速，也可以使用 DTW 检测步行的相似性。 DTW 已应用于视频、音频和图形数据的时间序列——实际上，任何可以转换为线性序列的数据都可以使用 DTW 进行分析。一个众所周知的应用是自动语音识别，以应对不同的语速。其他应用包括说话人识别和在线签名识别。它还可以用于部分形状匹配应用。 一般来说，......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值