标签: tween

我在iOS中很好地CALayer使用CGPath(QuadCurve)动画.但是我想使用一个比Apple 提供的更有趣的缓动功能(EaseIn/EaseOut等).例如,弹跳或弹性功能.

这些东西可以与MediaTimingFunction(bezier)一起使用:

但我想创建更复杂的计时功能.问题是媒体时间似乎需要一个立方贝塞尔,它不足以产生这些效果:

http://wiki.sparrow-framework.org/_media/manual/transitions.png

该代码创建上面是很简单的在其他框架中,这使得这个非常令人沮丧.请注意,曲线是将输入时间映射到输出时间(Tt曲线)而不是时间 - 位置曲线.例如,easeOutBounce(T)= t返回一个新的t.然后该t用于绘制运动(或任何我们应该动画的属性).

所以,我想创建一个复杂的自定义,CAMediaTimingFunction但我不知道如何做到这一点,或者甚至可能吗？还有其他选择吗？

编辑:

这是步骤的具体示例.很有教育意义

1. 我想沿着从a点到b点的直线设置对象的动画,但我希望它使用上面的easeOutBounce曲线沿着直线"反弹"它的移动.这意味着它将遵循从a到b的精确线,但是将以比使用当前基于bezier的CAMediaTimingFunction更复杂的方式加速和减速.

2. 让我们使用CGPath指定任意曲线移动.它应该仍然沿着该曲线移动,但它应该以与线示例中相同的方式加速和减速.

从理论上讲,我认为它应该像这样工作:

让我们将运动曲线描述为关键帧动画移动(t)= p,其中t是时间[0..1],p是在时间t计算的位置.因此,move(0)返回曲线开始处的位置,移动(0.5)精确中间并移动(1)结束.使用定时功能时间(T)= t来提供移动的t值应该给我想要的东西.对于弹跳效果,定时功能应该返回相同的时间(0.8)和时间(0.8)的t值(仅作为示例).只需更换计时功能即可获得不同的效果.

(是的,可以通过创建和连接来回的四个线段进行线条弹跳,但这不是必需的.毕竟,它只是一个简单的线性函数,它将时间值映射到位置.)

我希望我在这里有意义.

在过去的几个月里,我在Java(Universal Tween Engine)中构建了一个开源补间引擎,以便能够轻松地为我的Android游戏添加流畅的动画和过渡.它像游戏一样轻而易举,并且被许多人成功使用(主要是在LibGDX社区).该库是通用的,可用于动画任何东西(Swing UI组件,opengl游戏对象等).现在,我想创建一个专门用于Android UI的lib的插件,因为我相信与内置动画框架相比,它可以极大地简化非常复杂的动画的创建.

我的lib公开了一种.update(float deltaTime)方法,每次要更新所有正在运行的动画时都必须调用该方法.它是为游戏量身定制的,因为每个游戏都会暴露无限循环,但UI并非如此.

因此,我想知道Android API的动画框架是如何工作的.是否存在专用于动画的静态线程,它连续运行并逐帧更新动画并暂停直到有新动画运行？

我在想是这样说,但我不是这个代码真的很高兴,因为它没有考虑设备的刷新率考虑的实例.

我是Three.js的新手.

我想在3D空间上绘制曲线(基于一些参数方程),使用THREE.JS,来说明绘图的路径.

为了实现这一点,我基本上尝试了两种方式:

方法一:更新几何中的值.:

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z));
var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var line = new THREE.Mesh(lineGeometry, lineMaterial);
scene.add(line);


function render() {
    requestAnimationFrame(animate);
    //calculate x,y,z based on my equation  
    lineGeometry.vertices.push(new THREE.Vector3(x,y,z));
    renderer.render(scene, camera);
}

APPROACH TWO:使用Tween.js更新功能. 参考

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z));
var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var line = new THREE.Mesh(lineGeometry, lineMaterial);
scene.add(line);

var position = {x: -15, y: 0, z: 0};
var target = {x: 4, y: …

我试图做一个简单的世博会,它的工作原理,但它有点紧张,FF似乎挂了一点.我该怎么做才能改善它？

var distance = (target - x) * dir;

x += (distance / 5) * dir;

if (dir == 1 && x >= target-1) {
    return;
    }

if (dir == -1 && x <= target+1) {
     return;
    }

我的应用程序通过在我的视图onDraw()方法中调用以下内容来实现自己的精灵:

  canvas.drawBitmap(sprite.getBitmap(), sprite.getX(), sprite.getY(), null);

该应用程序是一个物理模拟,到目前为止,这已经很好了.但是现在我想通过在某些事件发生时为精灵变换图像来增强动画效果.

例如,当发生碰撞时,我想播放一个爆炸动画.我的想法是将普通的精灵位图替换为爆炸PNG,并使用Android"补间动画"使爆炸变大.

但Android 补间动画示例假定您ImageView在XML配置中静态定义了某个地方.

有没有办法在onDraw()使用补间动画时绘制位图动画？或者我需要转换我的精灵使用某种ImageView？如果是后者,你能指点一下Android中适当的精灵动画的例子吗？

谢谢

我正在尝试使用ScaleAnimation缩放相当于View中心左右的View.无论我为pivotX和PivotY设置什么值,它总是以相同的方式缩放(就像右边缘看起来是缩放保持左边缘不变).下面是我用来初始化ScaleAnimation的代码.任何人都可以告诉我,如果我做错了什么？谢谢.

final ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.0f, 1.0f, 1.0f,
     Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

创建一个简单的应用程序,计算您的速度并将其显示在速度表图形中.我可以做所有的速度计算,gps计算等.但我对动画不太确定.除了温度计示例之外,有没有人在针规上有任何好的教程或示例？

我有一个three.js对象,这是一个给定的颜色.我想将它平滑地制作成另一种颜色.在动画期间,它应该只显示开始和结束之间的直接渐变.也就是说,它不应该在RGB颜色空间中线性地执行补间.我甚至不确定HSV空间内的线性补间看起来也不错.

如何在three.js对象上获得这种颜色补间？

我正在尝试从已经运行的数据集中添加年份标题tweenr.以来来自revolutionanalytics.com的示例

library(tidyverse)
library(tweenr)
library(gapminder)

gapminder_edit <- gapminder %>%
  arrange(country, year) %>%
  select(gdpPercap,lifeExp,year,country, continent, pop) %>%
  rename(x=gdpPercap,y=lifeExp,time=year,id=country) %>%
  mutate(ease="linear")

gapminder_tween <- tween_elements(gapminder_edit,
                              "time", "id", "ease", nframes = 150) %>%
  mutate(year = round(time), country = .group) %>%
  left_join(gapminder, by=c("country","year","continent")) %>%
  rename(population = pop.x)

gapminder_tween %>% arrange(country, .frame) %>% head()
#          x        y     time continent population .frame      .group year     country lifeExp   pop.y gdpPercap
# 1 779.4453 28.80100 1952.000      Asia    8425333      0 Afghanistan 1952 Afghanistan  28.801 8425333  779.4453
# 2 …

我为了实现这个目标而变得疯狂。我想在悬停时更改网格（ConvexGeometry）的颜色，直到这里我可以毫无问题地做到这一点，我可以更改网格的颜色。

当我想用从 a 到 b 的颜色过渡/插值来实现它时，问题就出现了，现在我正在使用 tween.js 但它不起作用。我不知道网格是否支持材质颜色过渡，或者问题是其他的......我将不胜感激。

我无法\xc2\xb4t找到任何这样做的例子......只有这种类似的方法。

无论如何，当我将鼠标悬停在对象上时，我正在执行以下操作：

var tween = new TWEEN.Tween(INTERSECTED.material.materials[0].color)\n            .to({r: 0, g: 25, b: 155}, 5000)\n            .easing(TWEEN.Easing.Quartic.In)\n            .onUpdate(function() {\n                INTERSECTED.material.materials[0].color.r = this.r;\n                INTERSECTED.material.materials[0].color.g = this.g;\n                INTERSECTED.material.materials[0].color.b = this.b;\n              }).start()\n