我想移动一定距离.但是在我的系统中存在惯性/拖动/负加速.我正在使用这样的简单计算:
v = oldV + ((targetV - oldV) * inertia)
Run Code Online (Sandbox Code Playgroud)
将其应用于多个帧会使运动"上升"或衰减,例如:
v = 10 + ((0 - 10) * 0.25) = 7.5 // velocity changes from 10 to 7.5 this frame
Run Code Online (Sandbox Code Playgroud)
所以我知道我想要旅行的距离和加速度,但不知道能让我到达那里的初始速度.也许一个更好的解释是我想知道有多难以击中一个台球,以便它停在某一点上.
我一直在研究运动方程(http://en.wikipedia.org/wiki/Equations_of_motion),但无法弄清楚我的问题的正确方法是什么......
有任何想法吗?谢谢 - 我来自设计而不是科学背景.
更新:Fiirhok拥有固定加速度值的解决方案; HTML + jQuery演示:
http://pastebin.com/ekDwCYvj
有没有办法用小数值或缓动函数做到这一点?根据我的经验,这样做的好处是固定加速度和基于帧的动画有时会超过最终点并需要强制,从而产生轻微的捕捉故障.
我试图在下面的动画中模拟引力/加速度.earth随着距离越来越近,角速度应该sol越来越大.我想我需要一个缓动功能来修改earth.angularVelocity但不知道怎么做.
我不知道是否已经定义了缓动函数或自定义函数.我需要的缓动函数应该像在这个图中一样工作:
earth的近日点是180°,远日点是0/360°.如何创建这样的功能并使其工作?
function pullRelease(angularPosition, begin, change, maxVelocity) {
// ?
}
earth.angularVelocity = pullRelease(earth.angularPosition, 0, 360, 3);
Run Code Online (Sandbox Code Playgroud)
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var sol = {
x: 125,
y: 150,
r: 30,
fill: "gold",
};
var orbit = {
x: 200,
y: 150,
semiMajor: 150,
semiMinor: 75,
};
var earth = {
r: 15,
fill: "dodgerblue",
angularPosition: 0,
angularVelocity: 1,
};
// draw sun …Run Code Online (Sandbox Code Playgroud)如果需要更高级的曲线,UIView基于块的动画方法中缺少自定义缓动曲线会导致Core Animation.
CAKeyframeAnimation在如何使用Core Animation创建自定义缓动功能中讨论了使用Category on执行此操作的方法?.
为了保持我的代码清洁和可维护,我想更进一步,重新实现UIView基于块的方法,并包含一个描述缓动曲线功能的块.结果类别UIView看起来像这样:
+ (void)animateWithDuration:(NSTimeInterval)duration easingCurveFunction:(double(^)(double))function animations:(void (^)(void))animations;
Run Code Online (Sandbox Code Playgroud)
有没有人知道苹果如何实现基于块的动画方法?
下面的代码使用简单的easy函数将线条旋转到鼠标位置,但问题是atan2()方法的工作形式是-PI到PI,当角度达到任一极限时,线条会向后旋转,我可以让它从0旋转到TWO_PI但没有什么不同,因为线会向后旋转直到它到达targetAngle,如果我不使用缓动计算工作正常,因为从-PI跳到PI是不明显的,所以我该如何轻松我的轮换并避免这个问题?
float angle = 0;
float targetAngle = 0;
float easing = 0.1;
void setup() {
size(320, 240);
}
void draw() {
background(200);
noFill();
stroke( 0 );
// get the angle from the center to the mouse position
angle = atan2( mouseY - height/2, mouseX - width/2 );
// check and adjust angle to go from 0 to TWO_PI
if ( angle < 0 ) angle = TWO_PI + angle;
// ease rotation
targetAngle += (angle - targetAngle) * easing; …Run Code Online (Sandbox Code Playgroud) 你能告诉我有什么好的,有点样本的应用程序你可以尝试所有那些具有不同参数的缓动函数并查看更改吗?
我的意思是有两个实际原因导致我无法建立自己的原因:
我在代码中创建doubleAniation,我想为它添加一个缓动函数,那我该怎么做呢?
animation ×3
wpf ×2
drag ×1
easing ×1
html5-canvas ×1
ios ×1
java ×1
javascript ×1
motion ×1
processing ×1
rotation ×1
trigonometry ×1