标签: translate-animation

我要做的是在CSS3动画在元素上运行时更改元素的transform3d转换。但是，当我尝试执行此操作时，似乎动画在每次更新动画之前都会重置转换，以使转换始终为（0,0,0）。我希望动画能够运行，并且仍然能够使用javascript进行翻译，例如：

element.style.webkitTransform='translate3d(100px, 30px, 0px)';

我知道可以通过在内部div运行动画时使用第二个包含div来设置转换，但是我希望能够在可能的情况下只使用一个div。你知道如何做到这一点吗？

这是我的CSS：

.class{
   width:32px;
   height:32px;
   position:absolute;
   background: transparent url('./img/sprite.png');
   background-size:100%;
   -webkit-transform: translate3d(48px, 176px, 0px);
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 100ms;


   -webkit-animation:spin .75s infinite linear;
}

@-webkit-keyframes spin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

我有两个小部件,ImageView和SurfaceView.

SurfaceView包含相机预览.有时候我必须在SurfaceView上显示Bitmap(我使用ImageView来显示这个图像).没关系.但是,我还必须翻译这个位图.当我开始动画时,ImageView消失了.

我使用TranslateAnimation:

TranslateAnimation slide = new TranslateAnimation(fromX, toX, fromY, toY);
slide.setDuration(1000);
slide.setFillAfter(true);
image.startAnimation(slide);


我想知道,为什么ImageView会消失以及如何修复它.有人解决了类似的问题吗？

我创建了一个CustomView扩展View.创建一些CustomView并使用动画来移动和旋转它们.更改backgroundResource和错误发生后,新的背景不会填写所有CustomView.请看代码:

    clearAnimation();
    AnimationSet animation = new AnimationSet(true);
    TranslateAnimation translateAnimation = new TranslateAnimation(0, destX - srcX, 0, destY - srcY);
    translateAnimation.setInterpolator(new LinearInterpolator());
    translateAnimation.setDuration((long) MGConstant.ANIMATE_DURATION);
    animation.addAnimation(translateAnimation);

    final float finalX = destX;
    final float finalY = destY;

    animation.setAnimationListener(new AnimationListener() {

        public void onAnimationEnd(Animation arg0) {
            clearAnimation();
            setX(finalX);
            setY(finalY);

            RotateAnimation rotateAnimation = new RotateAnimation(0, degrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rotateAnimation.setInterpolator(new LinearInterpolator());
            rotateAnimation.setDuration((long) MGConstant.ANIMATE_DURATION);
            rotateAnimation.setFillAfter(true);
            startAnimation(rotateAnimation);
            resetLayout();

            mMoveStatus = false;
            degree = degrees;

        }

        public …

我正在Eclipse中开发一款适用于Android的游戏,我试图让图像平滑地上下翻转,看起来像是无限上下浮动.它是平滑的,但在从向下到向上的过渡中看起来不稳定,反之亦然.我不相信我已经牢牢掌握了德尔塔和德尔塔如何在单位上工作.我已经尝试搜索此网站和谷歌获取有关此信息,但是,虽然能够以这种方式找到我所有其他问题的解决方案,但无法找到解决方案.

我的XML动画文件的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true" >

<alpha android:fromAlpha="0.0" android:toAlpha="1.0" 
      android:interpolator="@android:anim/accelerate_interpolator" 
      android:duration="1000"
      android:fillAfter="true"/>

<translate
android:interpolator="@android:anim/linear_interpolator"
android:fromYDelta="0%p"
android:toYDelta="10%p"
android:duration="2000"
android:startOffset="0"
android:repeatCount="infinite"></translate>

<translate
android:interpolator="@android:anim/linear_interpolator"
android:fromYDelta="10%p"
android:toYDelta="-10%p"
android:duration="2000"
android:startOffset="2000"
android:repeatCount="infinite"></translate>

</set>

我尝试在第二次翻译中从10%p到0%p但是这不起作用.从10%p到0%p都没有.任何帮助将不胜感激.谢谢!

给定一个 3 x 3 旋转矩阵 R 和一个 3 x 1 平移矩阵 T，我想知道如何将 T 和 R 矩阵乘以图像？

假设 Iplimage img 是 640 x 480。

我想做的是R*(T*img)。

我正在考虑使用 cvGemm，但这没有用。

我正在使用 Android 中的 TranslateAnimation 做一个项目。因为我正在成功翻译图像，但我必须将 onClickListener 添加到图像中。这意味着我在翻译过程中单击了图像并获取了它们的值，但我正在对图像进行 onClick 操作。

我正在使用以下代码：

public class SampleGame extends Activity implements OnClickListener {

    int x10, x20, y10, y20;

    ImageView img;

    Button animation;
    Handler transHandler;
    RelativeLayout layout;
    Random rand;
    int mSpeedX, mSpeedY;
    int width, height;
    Thread thread;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        layout = (RelativeLayout) findViewById(R.id.layout);
        animation = (Button) findViewById(R.id.animation);

        animation.setOnClickListener(this);

        rand = new Random();

        width = getWindow().getWindowManager().getDefaultDisplay().getWidth() - 20;
        height = getWindow().getWindowManager().getDefaultDisplay().getHeight() - 70;

        x10 = width - rand.nextInt(width);
        y10 = height; …

我有一个特别的问题要通过 CSS3 过渡来解决。所以我有一个包含内联块元素的容器，一旦我选择了其中一个元素，其他所有内容都将被隐藏，并且所选元素应该平滑地移动到容器的左上角。

例如，我的容器如下所示，其中包含 8 个元素，包裹在 2 行中：

= = = = =
ABCD
EFGH
= = = =

现在我选择 G，其他所有东西都被隐藏了，G 被移动到左上角：

= = = = =
G
= = = =

我目前的做法是将 G 的所有兄弟姐妹的宽度和高度设置为 0，CSS3 过渡效果完美，我可以看到 G 平滑地移动到左边缘。但是，由于 G 位于第二行，因此当第一行上的所有内容都缩小时，它会向上跳一行。这种运动是突然的和不可取的。我希望效果就像 G 对角线平滑地移动到左上角。

我还查看了 translate(x,y) ，但它也不好，因为我不想计算将框移动到左上角的像素数。如果我可以使用 (position: absolute; left: 0; top: 0) 以某种方式自动位于左上角，那将是理想的，但是一旦我将位置设置为绝对，元素就会立即跳转。

任何 CSS3 大师都可以提出一个不错的方法吗？

我创建了一组立方体，我正在尝试弄清楚如何设置中心以便我可以旋转它们。

这是小提琴：https : //jsfiddle.net/of1vfhzz/

我在这里添加立方体：

side1 = new THREE.Object3D();
addCube({ name: 'side1topleft', x: -8.5, y: 7.5, z: 5 });
addCube({ name: 'side1topmiddle', x: -4, y: 7.5, z: 5 });
addCube({ name: 'side1topright', x: .5, y: 7.5, z: 5 });
addCube({ name: 'side1middleleft', x: -8.5, y: 3, z: 5 });
addCube({ name: 'side1middlemiddle', x: -4, y: 3, z: 5 });
addCube({ name: 'side1middleright', x: .5, y: 3, z: 5 });
addCube({ name: 'side1bottomleft', x: -8.5, y: -1.5, z: 5 }); …

我有多个可选择的视图。当其中一个被选中时，我希望我的新视图首先定位到与所选视图相同的位置，并将其移动到我的屏幕顶部。我怎样才能做到这一点？所选项目的位置各不相同。

// Selected item
int[] location = new int[2];
item.getLocationOnScreen(location);
int positionY = location[1];

// Move the view I want to move to the position of selected item
viewToMove.setTranslationY(positionY);

// Create and start animation
Animation slideUp = new TranslateAnimation(viewToMove.getTranslationX(), viewToMove.getTranslationX(), positionY, -positionY);
slideUp.setDuration(1000);
slideUp.setFillEnabled(true);
slideUp.setFillAfter(true);
viewToMove.startAnimation(slideUp);

我正在尝试实现全屏无限滚动背景效果，它必须延伸到视口的整个高度和宽度。

这是演示。

我尝试过的解决方案是采用一个具有100vh和100vw视口的包装元素，然后div在其中放置 2 s，其高度为 100%，具有相同的背景图像和background-size: cover属性。我使用的图像的大小是：1,920px \xc3\x97 808px。

然后我在包装元素上应用了以下动画：

@keyframes infiniteScrollBg {\n  0% {\n    transform: translateY(0%);\n  }\n  100%{\n    transform: translateY(-100%);\n  }\n}\n

但问题是，在某些视口尺寸上，图像无法正确重复（由于background-size: cover属性）：

。

这是我尝试过的完整代码：

<div class="animated-scene">\n    <div class="animated-scene__frame animated-scene__frame-1"></div>\n    <div class="animated-scene__frame animated-scene__frame-2"></div>\n</div>\n

和CSS：

.animated-scene {\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    min-height: 400px;\n    animation: infiniteScrollBg 50s linear infinite;\n }\n\n .animated-scene__frame {\n     width: 100%;\n     height: …