Creación de una presentación de diapositivas que desvanecen imágenes entre sí y transforman
Estoy intentando crear una demostración de diapositiva de la imagen que sea similar a esto
He encontrado este tutorial que me muestra cómo hacer que las imágenes se desvanecen entre sí, que funciona muy bien, pero no puedo encontrar ningún ejemplo de cómo hacer que el movimiento / escalado al mismo tiempo, así que estoy tratando de adaptarlo.
- Fondo intermitente
- Causa de OutOfMemoryError en la animación de marco por cuadro en Android
- Animar agregar / quitar elementos de ListView con CursorAdapter es posible?
- Expandiendo / Colapsando CardView con un gesto de clic o de deslizamiento (Android)?
- como puedo parar la animacion
He añadido una animación de escala y poner eso junto con la animación alfa en un animationset pero no puedo conseguir que funcione correctamente, es sólo hacer la animación en todas las otras imágenes y luego cuando el zoom se inicia zooms una forma y los interruptores y luego zooms la otra manera.
Estoy razonablemente nuevo en Android no han hecho ninguna animación antes y estoy teniendo difícilmente entender cómo funciona el ejemplo. Por lo tanto, tengo dificultades para modificarlo.
¿Puede alguien ayudarme a resolver lo que estoy haciendo mal? Estoy empezando a sacarme el pelo!
Mi código java es:
public class TopListActivity extends Activity { ImageView slide_0; ImageView slide_1; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.test2); slide_0 = (ImageView) findViewById(R.id.slide_1); slide_1 = (ImageView) findViewById(R.id.slide_2); } private static class AnimationTimer extends TimerTask implements AnimationListener { TopListActivity topList; Vector<BitmapDrawable> images; int count = 0; public AnimationTimer(TopListActivity _topList) { this.topList = _topList; this.images = new Vector<BitmapDrawable>(); Resources resources = topList.getResources(); images.add((BitmapDrawable) resources.getDrawable(R.drawable.one)); images.add((BitmapDrawable) resources.getDrawable(R.drawable.two)); images.add((BitmapDrawable) resources.getDrawable(R.drawable.three)); images.add((BitmapDrawable) resources.getDrawable(R.drawable.four)); images.add((BitmapDrawable) resources.getDrawable(R.drawable.five)); images.add((BitmapDrawable) resources.getDrawable(R.drawable.six)); if (this.images.size() > 0) { this.topList.slide_0.setBackgroundDrawable(this.images.get(0)); if (this.images.size() > 1) { this.topList.slide_1.setBackgroundDrawable(this.images .get(1)); } } this.count = 1; } public void launch() { if (this.images.size() >= 2) { (new Timer(false)).schedule(this, 100); } } @Override public void run() { this.doit(); this.cancel(); } private void doit() { if ((this.count % 2) == 0) { AnimationSet set = new AnimationSet(false); AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f); animation.setStartOffset(5000); animation.setDuration(3000); animation.setFillAfter(true); ScaleAnimation zoom = new ScaleAnimation(1, 1.20f, 1, 1.20f); zoom.setStartOffset(0); zoom.setDuration(8000); zoom.setFillAfter(true); set.addAnimation(animation); set.addAnimation(zoom); set.setAnimationListener(this); this.topList.slide_1.startAnimation(set); } else { AnimationSet set = new AnimationSet(false); AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f); animation.setStartOffset(5000); animation.setDuration(3000); animation.setFillAfter(true); ScaleAnimation zoom = new ScaleAnimation(1.20f, 1, 1.20f, 1); zoom.setStartOffset(0); zoom.setDuration(8000); zoom.setFillAfter(true); set.addAnimation(animation); set.addAnimation(zoom); set.setAnimationListener(this); this.topList.slide_1.startAnimation(set); } } public void onAnimationEnd(Animation animation) { if ((this.count % 2) == 0) { this.topList.slide_1.setBackgroundDrawable(this.images .get((this.count + 1) % (this.images.size()))); } else { this.topList.slide_0.setBackgroundDrawable(this.images .get((this.count + 1) % (this.images.size()))); } this.count++; this.doit(); } public void onAnimationRepeat(Animation animation) { } public void onAnimationStart(Animation animation) { } } @Override public void onResume() { super.onResume(); (new AnimationTimer(this)).launch(); } }
y mi diseño es:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/frame" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/slide_1" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:id="@+id/slide_2" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </FrameLayout>
- AnimatedVectorDrawable no anima
- Hacer una animación de fragmentos de inserción
- Animación de la traducción y ampliación de la vista en Android
- Cómo animar la ventana emergente de abajo hacia arriba en android
- Imagen de animación de fondo en ProgressBar en Android?
- Android - Flip Animation no se mueve sin problemas
- ¿Cómo podemos optimizar (cpu & ram) esta animación de salpicadura personalizada de android?
- ¿Cómo funcionan las animaciones de Android bajo el capó?
Por último clasificado … es muy largo winded como yo no podía llegar a los apretones con el evento final de animación debido a las múltiples animaciones .. así que probablemente no es la mejor manera, pero funciona y estoy feliz!
Para cualquiera que quiera saber cómo … o quiere adaptarlo para hacerlo mejor aquí es:
Actividad:
public class MyTransition extends Activity { ImageView slide_0; ImageView slide_1; ImageView lastSlide; Vector<Integer> imageIds; LinearLayout linLayout; int count = 0; private Handler transparencyHandler = new Handler(); private Handler timerHandler = new Handler(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.test2); slide_0 = (ImageView) findViewById(R.id.slide_1); slide_1 = (ImageView) findViewById(R.id.slide_2); imageIds = new Vector<Integer>(); imageIds.add(R.drawable.one); imageIds.add(R.drawable.two); imageIds.add(R.drawable.three); imageIds.add(R.drawable.four); imageIds.add(R.drawable.five); imageIds.add(R.drawable.six); // Load Image 1 slide_0.setImageResource(imageIds.get(0)); slide_0.startAnimation(AnimationUtils.loadAnimation(this, R.anim.transition_down)); lastSlide = slide_0; timerHandler.postDelayed(timer, 8000); } private Runnable timer = new Runnable() { public void run() { if (lastSlide == slide_0) { slide_1.setImageResource(0); slide_1.setImageResource(imageIds.get((count + 1) % (imageIds.size()))); slide_1.startAnimation(AnimationUtils .loadAnimation(MyTransition .this, R.anim.transition_down)); lastSlide = slide_1; } else { slide_0.setImageResource(0); slide_0.setImageResource(imageIds.get((count + 1) % (imageIds.size()))); slide_0.startAnimation(AnimationUtils .loadAnimation(MyTransition .this, R.anim.transition_up)); lastSlide = slide_0; } count++; transparencyHandler.postDelayed(transparencyTimer, 1000); timerHandler.postDelayed(timer, 8000); } }; private Runnable transparencyTimer = new Runnable() { public void run() { if (lastSlide == slide_0) { slide_1.setBackgroundColor( android.R.color.transparent); slide_1.setImageResource( 0); } else { slide_0.setBackgroundColor( android.R.color.transparent); slide_0.setImageResource( 0); } } };
Diseño:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/frame" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/slide_1" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" /> <ImageView android:id="@+id/slide_2" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" /> </FrameLayout>
Animación (transición abajo):
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <alpha android:fromAlpha="0.0" android:toAlpha="2.0" android:duration="2000" android:repeatCount="0" setFillAfter="true" /> <scale android:fromXScale="1" android:toXScale="1.2" android:fromYScale="1" android:toYScale="1.2" android:duration="10000" android:repeatCount="0" setFillAfter="true" /> <alpha android:fromAlpha="2.0" android:toAlpha="0.0" android:duration="2000" android:repeatCount="0" android:startOffset="8000" setFillAfter="true" />
Usted está agregando dos animación por separado. Ése es porqué están interrumpiendo.
Como principiante, recomiendo entrar en el hábito de hacer animaciones (y realmente todos los recursos posibles) utilizando xml. Es mucho más detallado y es más fácil cambiar los recursos más adelante (además de permitirle cambiar automáticamente los recursos en tiempo de ejecución basados en el tamaño de la pantalla, el idioma, etc.). También entrar en un hábito de realmente agotar todos los widgets Android antes de implementar algo personalizado. En cuanto a un recurso de animación, mira el ejemplo de hyperspace_jump.xml
en los recursos de animación .
Para transiciones de vista, normalmente recomiendo un ViewFlipper . Sin embargo, puesto que usted quiere transiciones de encargo, usted puede necesitar bajar un nivel y utilizar el ViewnAnimator . Entiendo que quieres recorrer las animaciones, pero primero tienes que trabajar para una animación. Creo que esto todavía podría trabajar con ViewFlipper, que se vería algo como esto:
<ViewFlipper android:id="@+id/VF" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inAnimation="@anim/yourFirstAnimation android:flipInterval="@integer/flip_interval_time"> <ImageView android:id="@+id/slide_1" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:id="@+id/slide_2" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </ViewFlipper> onCreate(Bundle b) { setContentView(R.layout.main); mVF = (ViewFlipper) findViewById(R.id.VF); mVF.startFlipping(); }
Entonces, cuando quiera hacer un ciclo a través de animaciones: Establecer su flipInterval a 0 (creo) y hacer como hiciste con el evento OnAnimationEnd:
public void onAnimationEnd(Animation animation) { Animation an = myAnimationContainer.getRandomAnimation(); mVF.setInAnimation(an); mVF.showNext(); }
No deberías sincronizar el tiempo de flipInterval, ya que en realidad depende de cuánto tiempo dura la animación.
- Mejor vista para mostrar imágenes y contenido html en android
- ¿Cómo obtener un script en init.d para ejecutar al arrancar en Android?