Question

我正在创建一个动画，一个视图移动并同时将其自身转换为另一种形式。

这是动画描述：

animation expected

我不知道怎么做。对我有什么解决方案？
任何建议表示赞赏。

=============================================== ==================
更新

我用AnimationSet尝试了TranslateAnimation + ScaleAnimation，但我的ImageView缩放得非常难看。

这是使用centerCrop开始的图像：
enter image description here

这是Translate + ScaleAnimation的结果：
enter image description here

但这是我想要的结果（centerCrop上面有相同的src）：
enter image description here

如何变换+移动但保持像这样的图像比例？我不希望我的图像比例发生变化。

感谢您的帮助。

Answer 1

以下是您对此答案的期望：

enter image description here

另请注意，此处提供的代码是出于测试目的而编写的，因此未进行优化。

我使用Animator（可用于api＆gt; = 11）来达到您所描述的效果，因为我找不到TranslateAnimation和ScaleAnimation＆＃39;好＆＃39;足够的结果。

这里发生了三件事：

宽度正在变化
身高正在变化
＆＃39; X＆＃39; imageview的值正在改变

您需要提供这3个参数的最终值：finalWidth，finalHeight和final X展示位置。

我们将使用valueAnimator获取每次更新时宽度和高度的动画值，然后使用这些值更新LayoutParams的{{1}}。

ImageView按钮（位于上方animate中）调用以下方法：

gif

此示例中用于活动的布局没有什么特别之处：

public void animate() {
    // This is to get the screen dimensions
    final Point p = new Point();
    getWindowManager().getDefaultDisplay().getSize(p);

    // First, define the starting values

    final int startingWidth = mImageView.getWidth();
    final int startingHeight = mImageView.getHeight();
    final int startingXValue = mImageView.getX():

    // Next, define the final values

    // For this example, the final width will be half of screen-width
    final int finalWidth = p.x / 2;

    // Just an arbitrary final value for height. You will have to decide
    // what the final height should be
    final int finalHeight = p.y - ivv.getTop() - 300; 

    // final `X` placement of the imageview
    int finalXValue = p.x / 2 - finalWidth / 2;

    // ValueAnimator to generate changes in width
    final ValueAnimator vaW = ValueAnimator.ofInt(startingWidth, finalWidth);

    vaW.addUpdateListener(new AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            // Get animated width value update
            int newWidth = (int) vaW.getAnimatedValue();

            // Get and update LayoutParams from imageview
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) 
                                                mImageView.getLayoutParams();
            lp.width = newWidth;
            mImageView.setLayoutParams(lp);
        }
    });

    // ValueAnimator to generate changes in height      
    final ValueAnimator vaH = ValueAnimator.ofInt(startingHeight, finalHeight);

    vaW.addUpdateListener(new AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            // Get animated height value update
            int newHeight = (int) vaH.getAnimatedValue();

            // Get and update LayoutParams from imageview
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) 
                                                mImageView.getLayoutParams();
            lp.height = newHeight;
            mImageView.setLayoutParams(lp);
        }
    });

    // Used to provide translate animation
    ObjectAnimator oa = ObjectAnimator.ofFloat(
                                    mImageView, "X", startingXValue, 
                                              finalXValue);
    // To play these 3 animators together
    AnimatorSet as = new AnimatorSet();     
    as.playTogether(vaW, vaH, oa);
    as.setDuration(5000);

    as.start();
}

修改：重置<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@android:color/holo_blue_dark" > <Button android:id="@+id/bAnimate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="animate" android:layout_gravity="center_horizontal" /> <ImageView android:id="@+id/ivToAnimate" android:layout_width="100dp" android:layout_height="100dp" android:text="animate" android:layout_gravity="right" android:src="@drawable/index" android:scaleType="centerCrop" /> </LinearLayout>位置，尺寸和尺寸规模：

将起始值和最终值声明为类变量：

ImageView's

动画回来：

int startingWidth, startingHeight, startingXValue, finalWidth, finalHeight, finalXValue; // this method will only be called ONCE. // Use appropriate values to initialize starting and final values public void initialize() { final Point p = new Point(); getWindowManager().getDefaultDisplay().getSize(p); startingWidth = mImageView.getWidth(); startingHeight = mImageView.getHeight(); startingXValue = mImageView.getX(): finalWidth = p.x / 2; finalHeight = p.y - ivv.getTop() - 300; finalXValue = p.x / 2 - finalWidth / 2; } // Call this method whenever you need to animate forward // `animate()` method // refer above for comments public void animate() { final ValueAnimator vaW = ValueAnimator.ofInt(startingWidth, finalWidth); vaW.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { int newWidth = (int) vaW.getAnimatedValue(); LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mImageView.getLayoutParams(); lp.width = newWidth; mImageView.setLayoutParams(lp); } }); final ValueAnimator vaH = ValueAnimator.ofInt(startingHeight, finalHeight); vaW.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { int newHeight = (int) vaH.getAnimatedValue(); LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mImageView.getLayoutParams(); lp.height = newHeight; mImageView.setLayoutParams(lp); } }); ObjectAnimator oa = ObjectAnimator.ofFloat( mImageView, "X", startingXValue, finalXValue); AnimatorSet as = new AnimatorSet(); as.playTogether(vaW, vaH, oa); as.setDuration(5000); as.start(); }

Answer 2

第一个链接是创建一组动画。第二个链接 - 动画翻译。第三个链接 - 缩放动画。创建平移和缩放动画将它们添加到Animationset

AnimationSet

TranslateAnimation

ScaleAnimation

Answer 3

要在ImageView中保持相同的比例，请尝试使用以下属性：

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/your_image" />

在移动动画时变换ImageView（保持比例）

3 个答案: