gpt4 book ai didi

javascript - 如何使用贝塞尔曲线沿路径动画化图像

转载 作者:可可西里 更新时间:2023-11-01 02:31:55 24 4
gpt4 key购买 nike

我的目标:

  • 沿着如下图所示的路径移动/动画图像(可以连接贝塞尔曲线)。
  • 必须在 IE7+ 下工作,不要构建多个解决方案。
  • 我可以暂停/恢复移动图像。
  • 图像将继续沿路径移动(重复)。

the path

我考虑过的

  • CANVAS:IE7+8 不支持,尚未测试 explorercanvas!预见一些 z-index 问题。
  • SVG,IE7+8 不支持。
  • jQuery.path,一个扩展 jQuery 动画功能的插件。无法弄清楚简历部分,我想在支持时使用 CSS 转换。

我的计划

  • 使用 CSS 3D 变换、CSS 2d 变换或 jQuery.animate(支持的)和 requestAnimationFrame 为图像制作动画。
  • 计算所有坐标并简单地逐像素移动图像。

我的问题

  • 我的计划听起来很疯狂吗?更好的建议?
  • 您是否预见到一些性能问题?我最终可能会得到 5K 或 10K 坐标。
  • 你知道计算所有坐标的聪明方法、程序、函数或类似的东西吗?

最佳答案

有一个小脚本(基于 SVG),仅用于非直线动画,
称为 pathAnimator (2kb),它非常非常小而且非常高效。
不需要 jQuery。

例如:

var path = "M150 0 L75 200 L225 200 Z";         // an SVG path
pathAnimator = new PathAnimator( path ), // initiate a new pathAnimator object
speed = 6, // seconds that will take going through the whole path
reverse = false, // go back or forward along the path
startOffset = 0, // between 0% to 100%
easing = function(t){ t*(2-t) }; // optional easing function


pathAnimator.start( speed, step, reverse, startOffset, finish, easing);

function step( point, angle ){
// do something every "frame" with: point.x, point.y & angle
}

function finish(){
// do something when animation is done
}

(使用 fastdom 甚至可以提高效率)

关于javascript - 如何使用贝塞尔曲线沿路径动画化图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13612942/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com