【问题标题】:How to slide an ImageView from left to right smoothly in Android?如何在 Android 中平滑地从左向右滑动 ImageView?
【发布时间】:2019-03-05 15:09:18
【问题描述】:

我需要用平滑的动画从屏幕的左到右制作ImageView 滑动(我希望ImageView 在过渡期间可见)我尝试使用以下代码:

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;

camion.animate()
    .translationX(width)
    .setDuration(2000)
    .setInterpolator(new LinearInterpolator())
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            //camion.setVisibility(View.GONE);
        }
    });

ImageView 移动,但动画滞后且不像我想要的那样流畅。 我在代码上做错了什么?

【问题讨论】:

  • @ZiedRebhi 我试过这个例子,但动画仍然滞后
  • 只是好奇,你在什么设备上测试这个?还是你在模拟器上测试?
  • @Dom 我正在使用 android L 的 Moto G 2014 上对其进行测试

标签: java android android-animation


【解决方案1】:

创建这种补间动画很简单。只需按照步骤操作,

第 1 步

res 目录下创建一个目录anim 并将其作为slide.xml

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

   <translate
        android:fromXDelta="0%p"
        android:toXDelta="75%p"
        android:duration="800" />
</set>

您显然可以通过更改fromXDeltatoXDelta 两个属性来自定义动画。 %p 指的是 相对于父级,这意味着它将相对于父级移动图像 75%。

第 2 步

// Refer the ImageView like this
imageView = (ImageView) findViewById(R.id.img);

// Load the animation like this
animSlide = AnimationUtils.loadAnimation(getApplicationContext(),
                    R.anim.slide);

// Start the animation like this
imageView.startAnimation(animSlide);

如果您愿意,您也可以setInterpolator()setListeners()。为了简单起见,我没有在这里展示它们。如果您需要,请告诉我。

注意

正如您反复提到的,您遇到了滞后动画。我已经在 3 个真实设备和 2 个模拟器上测试了这个动画,并且所有这些设备上的动画都非常流畅。在 Moto E 等低端设备和 Nexus 5 和 Galaxy S6 等高端设备上进行了测试。

如果运行此代码仍然有延迟,那么一定是测试设备的原因。代码很完美。

更新

我刚刚检查了我在 Lollipop 上运行的 Moto G,动画运行流畅。这是一个非常小且轻量级的动画,绝不应该滞后。如果您仍然遇到延迟,则一定是您正在测试的设备,或者该 Activity 上的某些其他代码导致 UI 缓慢或无响应

试试看哪一种适合你,

  • 我已经在总共 6 台设备上进行了测试,完全没有延迟。因此,您可以放心,您的生产应用不会有任何延迟,可能是您的设备运行缓慢
  • 如果您正在执行一些繁重的操作,例如访问文件系统、数据库或任何其他繁重的操作,它一定会减慢 UI 线程并且您正在丢失帧。 尝试使用 @987654330 @为这些繁重的操作

【讨论】:

  • 好的,我已经尝试过了,但在我的 Moto G 上它仍然滞后。我将很快在其他 2 台设备上对其进行测试,我会通知您!
  • 问题是背景图像太大,需要大量的 cpu 来渲染,我已经减小了它的大小,现在它工作正常,非常感谢您的回答!我会尽快给你赏金
  • 很高兴知道它现在工作正常。我也花了很多时间在这么多设备上为你测试它。希望您能接受答案并奖励赏金。谢谢。
  • @Signo 我能理解。根本不是问题。如果您可以分配赏金,那就太好了。谢谢。
  • 黄油般顺滑确实+1
【解决方案2】:
TranslateAnimation animate = new TranslateAnimation(0, -view.getWidth(), 0, 0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);

【讨论】:

    【解决方案3】:

    试试这个。它将为 imageview 设置动画。

            ImageView img_animation = (ImageView) findViewById(R.id.img_animation);
            Display display = getWindowManager().getDefaultDisplay();
            float width = display.getWidth();
            TranslateAnimation animation = new TranslateAnimation(0, width - 50, 0, 0); // new TranslateAnimation(xFrom,xTo, yFrom,yTo)
            animation.setDuration(1000); // animation duration
            animation.setRepeatCount(5); // animation repeat count
            animation.setRepeatMode(2); // repeat animation (left to right, right to
                                        // left )
            // animation.setFillAfter(true);
    
            img_animation.startAnimation(animation); // start animation
    

    【讨论】:

    • 我已经尝试过这个解决方案(我在一个旧的 SO 问题上找到了它)但是即使使用这种方法动画也很滞后
    • 好的,我正在为你做这件事。直到等待更多答案
    • mm 我不认为他们想要实现观看小提琴,我尝试了该方法但它会缩放图像
    【解决方案4】:

    希望这对你有用

    animation.xml

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Animation" >
    
        <ImageView
            android:id="@+id/img_animation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="42dp"
            android:src="@drawable/emo_im_laughing" />
    
    </RelativeLayout>
    

    Animation.java

    import android.os.Bundle;
    import android.app.Activity;
    import android.view.animation.TranslateAnimation;
    import android.widget.ImageView;
    
    public class Animation extends Activity {
    
     @Override
     protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.);
    
      ImageView img_animation = (ImageView) findViewById(R.id.img_animation);
    
      TranslateAnimation animation = new TranslateAnimation(0.0f, 400.0f,
        0.0f, 0.0f);
      animation.setDuration(5000);
      animation.setRepeatCount(5);
      animation.setRepeatMode(2);
      animation.setFillAfter(true);
      img_animation.startAnimation(animation);
    
     }
    }
    

    【讨论】:

    • 翻译动画结束后如何获取当前视图位置??
    【解决方案5】:

    试试下面的代码

    TranslateAnimation animation = new TranslateAnimation(0.0f, 0.0f, 0.0f, 1500.0f); // new TranslateAnimation (float fromXDelta,float toXDelta, float fromYDelta, float toYDelta)
    animation.setDuration(2000); // animation duration
    animation.setRepeatCount(1); // animation repeat count if u repeat only once set to 1 if u don't repeat set to 0
    animation.setFillAfter(false);
    your_view .startAnimation(animation);//your_view for mine is imageView  
    

    【讨论】:

    • 翻译动画结束后如何获取当前视图位置?
    【解决方案6】:
    public class MainActivity extends Activity {
    
           int windowwidth;
           int windowheight;
    
           private LayoutParams layoutParams;
    
           @Override
           public void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  setContentView(R.layout.activity_main);
    
                  windowwidth = getWindowManager().getDefaultDisplay().getWidth();
                  windowheight = getWindowManager().getDefaultDisplay().getHeight();
                  final ImageView img = (ImageView) findViewById(R.id.imageView1);
    
                  img.setOnTouchListener(new View.OnTouchListener() {
    
                         @Override
                         public boolean onTouch(View v, MotionEvent event) {
                               LayoutParams layoutParams = (LayoutParams) img
                                             .getLayoutParams();
                               switch (event.getAction()) {
                               case MotionEvent.ACTION_DOWN:
                                      break;
                               case MotionEvent.ACTION_MOVE:
                                      int x_cord = (int) event.getRawX();
                                      int y_cord = (int) event.getRawY();
    
                                      if (x_cord > windowwidth) {
                                             x_cord = windowwidth;
                                      }
                                      if (y_cord > windowheight) {
                                             y_cord = windowheight;
                                      }
    
                                      layoutParams.leftMargin = x_cord - 25;
                                      layoutParams.topMargin = y_cord - 75;
    
                                      img.setLayoutParams(layoutParams);
                                      break;
                               default:
                                      break;
                               }
                               return true;
                         }
                  });
           }
    }
    

    【讨论】:

    • 这个问题已经有几个答案,其中一个已经被接受。您可能需要编辑您的答案,以说明它与其他答案有何不同以及它的优势。
    【解决方案7】:

    移动imageview

    从右到左使用@Aritra Roy 回答。

    使用此代码

    <?xml version="1.0" encoding="utf-8"?>
    <set
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/linear_interpolator"
        android:fillAfter="true">
    
        <translate
            android:fromXDelta="75%p"
            android:toXDelta="0%p"
            android:duration="100000" />
    </set>
    

    【讨论】:

      猜你喜欢
      • 2011-04-17
      • 1970-01-01
      • 2016-03-20
      • 2010-10-10
      • 1970-01-01
      • 1970-01-01
      • 2011-03-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多