Brug Android's skala-animation til at simulere en 3D-flip

Hvis du læser mine blogindlæg meget ofte, kender du en af ​​de ting, jeg kan lide at gøre, når jeg er ude af dagen med at spille som mobilkonsulent, er at lege med Android's animationskurser. Sidste år skrev min 15-årige søn og jeg et spil, og nu lægger vi sidste hånd på en opfølgende titel.

Som en del af vores seneste bestræbelse var vi nødt til at "vende" en flise over, når brugeren bankede på den. Den ønskede effekt ligner den ved at vende et spillekort, hvor alle ryggen ser ens ud, men hvert ansigt er unikt. Jeg begyndte at google Android 3D-animationer og tænkte, at der ville være en enkel måde at trække effekten af ​​ved hjælp af XML-transformationer og lyttere.

Desværre er det, hvad jeg fandt, at at gøre en "ægte" 3D flip-animation betyder at sprænge android.graphics.Camera-pakken. Det kræver en matrix, oversættelser før og efter, din egen kørsel og en anstændig mængde af "M" -ordet ... matematik.

Da jeg ikke ønskede at blive forkælet med en opgave, som jeg havde forventet at tage mere end et par minutter, besluttede jeg for grin, jeg ville prøve at simulere, hvad jeg ledte efter, ved hjælp af en enkel xScale-oversættelse. Jeg havde ikke store forhåbninger, men til min glæde var den resulterende animation ikke halv dårlig (fair for Midland som vi siger her i Texas). Faktisk blev det efter lidt finjustering faktisk vores ret godt!

Den følgende tutorial viser, hvordan du kan bruge denne enkle teknik i dine egne applikationer. Føl dig fri til at følge med eller downloade og importere hele projektet direkte til Eclipse.

1. Opret en ny Android-applikation i Eclipse. Mål Android 2.2 eller nyere.

2. Opret en ny mappe under / res kaldet / tegnbar. Det er her vi gemmer vores kort for- og bagsidebilleder som PNG'er.

3. Mens vi stadig er i biblioteket / res, tilføj en anden mappe kaldet / anim. Her vil vi inkludere to XML-filer, der repræsenterer vores to overgangsanimationer.

to_middle.xml

 "1.0" encoding = "utf-8" ?> 
 xmlns: android = "http://schemas.android.com/apk/res/android" 
 android: fromXScale = "1.0" android: toXScale = "0.0" 
 android: pivotX = "50%" 
 android: fromYScale = "1.0" android: toYScale = "1.0" 
 android: pivotY = "50%" 
 android: varighed = "250" /> 
 from_middle.xml 
 "1.0" encoding = "utf-8" ?> 
 xmlns: android = "http://schemas.android.com/apk/res/android" 
 android: fromXScale = "0.0" android: toXScale = "1.0" 
 android: pivotX = "50%" 
 android: fromYScale = "1.0" android: toYScale = "1.0" 
 android: pivotY = "50%" 
 android: varighed = "250" /> 

4. Da dette er en grafikintensiv applikation, hvor vi forventer, at orienteringen opretholdes i hele, åbner vi AndroidManifest.xml og tilføjer markøren Android: screenOrientation = "portræt" til vores hovedaktivitet.

AndroidManifest.xml

 "1.0" encoding = "utf-8" ?> 
 "Http://schemas.android.com/apk/res/android" 
 package = "com.authorwjf.deal" 
 android: versionCode = "1" 
 android: versionName = "1.0" > 
 android: minSdkVersion = "8" 
 android: targetSdkVersion = "17" /> 
 android: allowBackup = "sandt" 
 android: icon = "@ drawable / ic_launcher" 
 android: label = "@ streng / app_navn" 
 android: theme = "@ style / AppTheme" > 
 android: name = "com.authorwjf.deal.MainActivity" 
 android: label = "@ streng / app_navn" 
 android: screenOrientation = "Portrait" > 
 "android.intent.action.MAIN" /> 
 "android.intent.category.LAUNCHER" /> 

5. I mappen / res / layout definerer vi aktiviteten som et lineært layout med en etiket, billedvisning og knap, alle stablet lodret.

activity_main.xml

 "Http://schemas.android.com/apk/res/android" 
 android: layout_width = "fill_parent" 
 android: layout_height = "fill_parent" 
 android: orientering = "lodret" 
 android: baggrund = "# 006600" 
 android: gravitation = "center" > 
 android: id = "@ + id / textView1" 
 android: layout_width = "wrap_content" 
 android: layout_height = "wrap_content" 
 android: text = "Simuleret kortaftale" 
 android: textColor = "#ffffff" 
 android: textSize = "26sp" 
 android: layout_margin = "10dip" 
 android: textStyle = "fed" /> 
 android: id = "@ + id / imageView1" 
 android: layout_width = "wrap_content" 
 android: layout_height = "wrap_content" 
 android: layout_margin = "10dip" 
 android: tyngdekraft = "center" 
 android: src = "@ drawable / card_back" /> 
 android: id = "@ + id / knap1" 
 android: layout_width = "wrap_content" 
 android: layout_height = "wrap_content" 
 android: layout_margin = "10dip" 
 android: polstring = "10dip" 
 android: text = "Hit Me!" /> 

6. Det er tid til at kode vores /src/MainActivity.java-fil. Størstedelen af ​​koden håndterer bare anvendelsen af ​​vores animationer og bytter billeder mellem kortets forside og bagside, når det er nødvendigt.

MainActivity.java

 pakke com.authorwjf.deal; 
 import android.os.Bundle; 
 import android.view.View; 
 import android.view.View.OnClickListener; 
 import android.view.animation.Animation; 
 import android.view.animation.Animation.AnimationListener; 
 import android.view.animation.AnimationUtils; 
 import android.widget.ImageView; 
 import android.app.Aktivitet; 
 public class MainActivity udvider aktivitetsimplementeringer OnClickListener, 
 AnimationListener { 
 privat animationsanimation1; 
 privat animationsanimation2; 
 privat boolsk isBackOfCardShowing = sand ; 
 @Override 
 beskyttet tomrum onCreate (Bundle gemtInstanceState) { 
 super .onCreate (gemtInstanceState); 
 setContentView (R.layout. Activity_main ); 
 animation1 = AnimationUtils. loadAnimation ( dette, R.anim. til_middle ); 
 animation1.setAnimationListener ( dette ); 
 animation2 = AnimationUtils. loadAnimation ( dette, R.anim. fra_middle ); 
 animation2.setAnimationListener ( dette ); 
 findViewById (R.id.-knap1) .setOnClickListener ( dette ); 
 } 
 @Override 
 offentligt ugyldigt onClick (Vis v) { 
 v.setEnabled ( falsk ); 
 ((ImageView) findViewById (R.id. ImageView1 )). ClearAnimation (); 
 ((ImageView) findViewById (R.id. ImageView1 )). SetAnimation (animation1); 
 ((ImageView) findViewById (R.id. ImageView1 )). StartAnimation (animation1); 
 } 
 @Override 
 public void onAnimationEnd (Animation animation) { 
 if (animation == animation1) { 
 if (isBackOfCardShowing) { 
 ((ImageView) findViewById (R.id. ImageView1 )). SetImageResource (R.drawable. Card_front ); 
 } andet { 
 ((ImageView) findViewById (R.id. ImageView1 )). SetImageResource (R.drawable. Card_back ); 
 } 
 ((ImageView) findViewById (R.id. ImageView1 )). ClearAnimation (); 
 ((ImageView) findViewById (R.id. ImageView1 )). SetAnimation (animation2); 
 ((ImageView) findViewById (R.id. ImageView1 )). StartAnimation (animation2); 
 } andet { 
 isBackOfCardShowing = isBackOfCardShowing!; 
 findViewById (R.id. knap1) .setEnabled ( sand ); 
 } 
 } 
 @Override 
 public void onAnimationRepeat (Animation-animation) { 
 // TODO Auto-genereret metodestub 
 } 
 @Override 
 public void onAnimationStart (Animation-animation) { 
 // TODO Auto-genereret metodestub 
 } 
 } 

Klar til at prøve det? Læg APK'en på en emulator eller enhed, og klik på knappen for at behandle kortet med billedsiden nedad.

Noget interessant, jeg opdagede, mens jeg eksperimenterede med til / fra xml-filer, er, at selvom Y-skalaen ikke ændres, skal du inkludere en 1, 0 start- og slutværdi for det; Ellers gengives animationen uden gengivelse af hvorfor.

© Copyright 2020 | mobilegn.com