Androidでスムーズな画像回転を作成するにはどうすればよいですか?
質問
RotateAnimation
を使用して、Androidのカスタムサイクリックスピナーとして使用している画像を回転させています。 rotate_indefinitely.xml
に配置したres/anim/
ファイルは次のとおりです。
<?xml version="1.0" encoding="UTF-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:duration="1200" />
ImageView
を使用してこれをAndroidUtils.loadAnimation()
に適用すると、うまくいきます!
spinner.startAnimation(
AnimationUtils.loadAnimation(activity, R.anim.rotate_indefinitely) );
1つの問題は、画像の回転が各サイクルの先頭で一時停止するように見えることです。
つまり、画像は360度回転し、一時停止してから再び360度回転します。
問題は、アニメーションがandroid:iterpolator="@android:anim/accelerate_interpolator"
(AccelerateInterpolator
)のようなデフォルトの補間器を使用していることだと思いますが、アニメーションを補間しないように指示する方法がわかりません。
アニメーションをスムーズに循環させるために、補間をオフにするにはどうすればよいですか(実際に問題がある場合)。
解決
AccelerateInterpolatorについてあなたは正しいです。代わりにLinearInterpolatorを使用する必要があります。
android.R.anim.linear_interpolator
を使用して、アニメーションXMLファイルの組み込みandroid:interpolator="@android:anim/linear_interpolator"
を使用できます。
または、プロジェクトで独自のXML補間ファイルを作成できます。名前をres/anim/linear_interpolator.xml
:
<?xml version="1.0" encoding="utf-8"?>
<linearInterpolator xmlns:android="http://schemas.android.com/apk/res/android" />
そしてアニメーションXMLに追加します:
android:interpolator="@anim/linear_interpolator"
特別な注意:回転アニメーションがセット内にある場合、補間の設定は機能しないようです。上部の要素を回転させると修正されます。 (これにより時間を節約できます。)
他のヒント
この問題もあり、xmlで線形補間を設定しようとしましたが成功しませんでした。私のために働いた解決策は、コード内でRotateAnimationとしてアニメーションを作成することでした。
RotateAnimation rotate = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(5000);
rotate.setInterpolator(new LinearInterpolator());
ImageView image= (ImageView) findViewById(R.id.imageView);
image.startAnimation(rotate);
これは正常に動作します
<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1600"
android:fromDegrees="0"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="358" />
逆回転するには:
<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1600"
android:fromDegrees="358"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="0" />
たぶん、このようなものが役立ちます:
Runnable runnable = new Runnable() {
@Override
public void run() {
imageView.animate().rotationBy(360).withEndAction(this).setDuration(3000).setInterpolator(new LinearInterpolator()).start();
}
};
imageView.animate().rotationBy(360).withEndAction(runnable).setDuration(3000).setInterpolator(new LinearInterpolator()).start();
ところで、次のように360以上回転できます:
imageView.animate().rotationBy(10000)...
360以降のtoDegrees="359"
を使用してみてください<!>#176;および0 <!>#176;同じです。
<set>
-Elementをラップした<rotate>
-Elementを削除すると問題が解決します!
Shalafiに感謝!
したがって、Rotation_ccw.xmlは次のように見えるはずです:
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="-360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:fillAfter="false"
android:startOffset="0"
android:repeatCount="infinite"
android:interpolator="@android:anim/linear_interpolator"
/>
ObjectAnimator.ofFloat(view, View.ROTATION, 0f, 360f).setDuration(300).start();
これを試してください。
試したものに関係なく、スムーズな回転アニメーションのためのコード(およびsetRotation)を使用してこれを正しく動作させることはできませんでした。私がやったことは、程度の変化を非常に小さくすることで、小さな一時停止が目立たないようにしました。あまり多くの回転を行う必要がない場合、このループを実行する時間はごくわずかです。効果は滑らかな回転です:
float lastDegree = 0.0f;
float increment = 4.0f;
long moveDuration = 10;
for(int a = 0; a < 150; a++)
{
rAnim = new RotateAnimation(lastDegree, (increment * (float)a), Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rAnim.setDuration(moveDuration);
rAnim.setStartOffset(moveDuration * a);
lastDegree = (increment * (float)a);
((AnimationSet) animation).addAnimation(rAnim);
}
hanryが上で述べたように、ライナーインターポレーターを置くことは問題ありません。ただし、回転がセット内にある場合は、android:shareInterpolator = <!> quot; false <!> quot;スムーズにします。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
**android:shareInterpolator="false"**
>
<rotate
android:interpolator="@android:anim/linear_interpolator"
android:duration="300"
android:fillAfter="true"
android:repeatCount="10"
android:repeatMode="restart"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%" />
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:duration="3000"
android:fillAfter="true"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0"
android:toYScale="0" />
</set>
Sharedinterpolatorがfalseでない場合、上記のコードはグリッチを与えます。
プログラムで回転オブジェクト。
//時計回りの回転:
public void rorate_Clockwise(View view) {
ObjectAnimator rotate = ObjectAnimator.ofFloat(view, "rotation", 180f, 0f);
// rotate.setRepeatCount(10);
rotate.setDuration(500);
rotate.start();
}
//反時計回りの回転:
public void rorate_AntiClockwise(View view) {
ObjectAnimator rotate = ObjectAnimator.ofFloat(view, "rotation", 0f, 180f);
// rotate.setRepeatCount(10);
rotate.setDuration(500);
rotate.start();
}
view は、ImageViewまたはその他のウィジェットのオブジェクトです。
rotate.setRepeatCount(10); を使用して回転を繰り返します。
500 はアニメーションの継続時間です。
私のようなセットアニメーションを使用している場合は、セットタグ内に補間を追加する必要があります。
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<rotate
android:duration="5000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:startOffset="0"
android:toDegrees="360" />
<alpha
android:duration="200"
android:fromAlpha="0.7"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toAlpha="1.0" />
</set>
それは私のために働いた。
0から360に移動するため、0/360で予想よりも少し時間がかかる可能性はありますか?おそらく、Degreesを359または358に設定します。
Androidでオブジェクトをアニメーション化し、オブジェクトをlocation1からlocation2に移動させる場合、アニメーションAPIは中間の位置(トゥイーン)を計算し、適切なタイミングで適切な移動操作をメインスレッドにキューイングしますタイマーを使用します。これは正常に機能しますが、メインスレッドは通常、他の多くのことに使用されます<!>#8212。ペインティング、ファイルを開く、ユーザー入力への応答など。キューに入れられたタイマーはしばしば遅れることがあります。よく書かれたプログラムは常にバックグラウンド(メインではない)スレッドで可能な限り多くの操作を実行しようとしますが、メインスレッドの使用を常に避けることはできません。 UIオブジェクトを操作する必要がある操作は、常にメインスレッドで実行する必要があります。また、多くのAPIは、スレッドセーフの形式として操作をメインスレッドに戻します。
ビューはすべて、すべてのユーザーインタラクションにも使用される同じGUIスレッドで描画されます。
GUIを迅速に更新する必要がある場合、またはレンダリングに時間がかかりすぎてユーザーエクスペリエンスに影響する場合は、SurfaceViewを使用します。
回転画像の例:
public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {
private DrawThread drawThread;
public MySurfaceView(Context context) {
super(context);
getHolder().addCallback(this);
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
drawThread = new DrawThread(getHolder(), getResources());
drawThread.setRunning(true);
drawThread.start();
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
boolean retry = true;
drawThread.setRunning(false);
while (retry) {
try {
drawThread.join();
retry = false;
} catch (InterruptedException e) {
}
}
}
}
class DrawThread extends Thread{
private boolean runFlag = false;
private SurfaceHolder surfaceHolder;
private Bitmap picture;
private Matrix matrix;
private long prevTime;
public DrawThread(SurfaceHolder surfaceHolder, Resources resources){
this.surfaceHolder = surfaceHolder;
picture = BitmapFactory.decodeResource(resources, R.drawable.icon);
matrix = new Matrix();
matrix.postScale(3.0f, 3.0f);
matrix.postTranslate(100.0f, 100.0f);
prevTime = System.currentTimeMillis();
}
public void setRunning(boolean run) {
runFlag = run;
}
@Override
public void run() {
Canvas canvas;
while (runFlag) {
long now = System.currentTimeMillis();
long elapsedTime = now - prevTime;
if (elapsedTime > 30){
prevTime = now;
matrix.preRotate(2.0f, picture.getWidth() / 2, picture.getHeight() / 2);
}
canvas = null;
try {
canvas = surfaceHolder.lockCanvas(null);
synchronized (surfaceHolder) {
canvas.drawColor(Color.BLACK);
canvas.drawBitmap(picture, matrix, null);
}
}
finally {
if (canvas != null) {
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
}
}
アクティビティ:
public class SurfaceViewActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MySurfaceView(this));
}
}
再起動を避けるために、360以上を使用してみてください。
360ではなく3600を使用していますが、これは私には問題ありません:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="3600"
android:interpolator="@android:anim/linear_interpolator"
android:repeatCount="infinite"
android:duration="8000"
android:pivotX="50%"
android:pivotY="50%" />
Kotlinで:
ivBall.setOnClickListener(View.OnClickListener {
//Animate using XML
// val rotateAnimation = AnimationUtils.loadAnimation(activity, R.anim.rotate_indefinitely)
//OR using Code
val rotateAnimation = RotateAnimation(
0f, 359f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f
)
rotateAnimation.duration = 300
rotateAnimation.repeatCount = 2
//Either way you can add Listener like this
rotateAnimation.setAnimationListener(object : Animation.AnimationListener {
override fun onAnimationStart(animation: Animation?) {
}
override fun onAnimationRepeat(animation: Animation?) {
}
override fun onAnimationEnd(animation: Animation?) {
val rand = Random()
val ballHit = rand.nextInt(50) + 1
Toast.makeText(context, "ballHit : " + ballHit, Toast.LENGTH_SHORT).show()
}
})
ivBall.startAnimation(rotateAnimation)
})