Flip Animation für ImageButtons

Black NEXUS

Black NEXUS

Ambitioniertes Mitglied
4
Hallo vereinte Entwicklergemeinde,

ich habe ja vor mehr als einem Jahr begonnen, ein Kartenspiel digital umzusetzen. Nach langer abstinenz des Projektes und neuer Roadmap, wollte ich ein paar Dinge verbessern, um ein wenig was für's Auge zu bekommen. Leider ist momentan das Unterforum für die Spieleentwicklung down, aber da es sich um ein eher allgemeines Problem handelt, sollte es ok sein.

Und zwar sind meine Karten ImageButtons, damit man gut mit ihnen interagieren kann. Dafür möchte ich eine Animation einfügen, welche das Bild des ImageButtons mit einem anderen ersetzt, was dann so aussehen soll, als wenn man die Karte umdreht. Siehe Beispiel.

Leider lässt sich nix im Netz finden, was auf einen ImageButton anwendbar ist.

Hat jemand eine Ahnung, wie ich dies nun realisieren kann, ohne von den ImageButtons auf etwas anderes zu wechseln? Weis nicht mal ob man das zeitlich auch beeinflussen kann diese Animation.

Da ich ja aus der Webentwicklung komme, bin ich mit JavaScript und CSS ein wenig verwöhnt was diese Dinge angeht. Sollte aber hoffentlich machbar sein.

Danke für Eure Gedult!

Gruß,
Black NEXUS
 
Hallo..
Ich schätze mal das du deine ImageButton mit einen OnClickListener aus gestattet hast.
Es ist möglich Button (ImageButton) zu animieren.
Da ich mich erst ca. seit einem Jahr damit beschäftige müsste es mit diesem Code gehen.
mainActivity
in der OnCreate Methode
Code: 
final Animation animFlip = AnimationUtils.loadAnimation(this, R.anim.anim_flip);
final Animation animFlipBack = AnimationUtils.loadAnimation(this, R.anim.anim_flipback);
		
ImageButton btn1 = (ImageButton)findViewById(R.id.mainImageButton1);
		
btn1.setOnClickListener(new ImageButton.OnClickListener(){
	@Override
	public void onClick(final View arg0) {
		new Handler().postDelayed(new Runnable(){
			@Override
			public void run(){
				arg0.startAnimation(animFlipBack);
			}
		},250);
		arg0.startAnimation(animFlip);
	}
});

res/anim
anim_flip.xml
Code: 
<?xml version="1.0" encoding="utf-8"?>
<scale
	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:duration="250" />
anim_flipback.xml
Code: 
<?xml version="1.0" encoding="utf-8"?>
<scale
	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:duration="250" />

Habe vergessen zu sagen das die Animation zusammen eine halbe Sekunde geht.

Ich hoffe ich konnte damit helfen
LG Freelager
 
Zuletzt bearbeitet:
  • Danke
Reaktionen: Black NEXUS
Hallo freelager,

danke für deine Antwort :) Ja mit der Dauer der Animationen konnte ich mir anhand von duration denken ;)

Das schaut ja alles ganz plausibel und einfach aus, nur frage ich mich, wo ich jetzt die Grafiken einfüge. Dieser Effekt nützt nicht viel wenn es ein und das selbe Motiv ist. Halt wie wenn man eine Karte umdreht, wo die Rückseite nach vorne kommt und umgekehrt :)

Auf jeden Fall ein schöner Ansatz, teste ich heute Abend mal daheim, danke dafür ;)

Gruß,
Black NEXUS
 
Hallo das müsste ich mir den code anschauen wo die Karten ausgesucht werden.
Das müsste man die Animation einfügen in der Methode
 
Hiho,

also Codeauszüge hab ich genug :)
Hier mal eine Funktion wo das Bild gesetzt wird.
Code: 
private void updateField(ImageButton ibtn, Card card, int position){
        try {
            if(card == null){
                ibtn.setBackgroundResource(R.drawable.no_card);
            } else {
                if(position > 4 && ((position % 2 != 0 && card.is_visible[0]) || (position % 2 == 0 && card.is_visible[1]) || (position >= 45))){
                    int resID = getResources().getIdentifier(card.card_img, "drawable", getPackageName());
                    ibtn.setBackgroundResource(resID);
                } else {
                    switch(card.type_card){
                    case 0:
                        ibtn.setBackgroundResource(R.drawable.card_clan_backview);
                        break;
                    case 1:
                        ibtn.setBackgroundResource(R.drawable.card_bund_backview);
                        break;
                    case 2:
                        ibtn.setBackgroundResource(R.drawable.card_spell_backview);
                        break;
                    }
                }
                card.position = position;
                if(Config.stage == 0){
                    Log.d("NEW_CARD_POS", "ID["+String.valueOf(card.id)+"] - POSITION["+String.valueOf(card.position)+"]");
                }
                //System.gc();
            }
        } catch (IllegalArgumentException e) {
            Log.e("IllegalArgumentException", e.toString());
        } catch (Exception e){
            Log.e("Exception", e.toString());
        }
    }

Ist natürlich nur eine Funktion, gibt noch einige andere. Müsste mich selbst erstmal wieder hinein finden, bald ein Jahr nix dran gemacht^^

Gruß,
Black NEXUS
 
Black NEXUS schrieb:
Hiho,

also Codeauszüge hab ich genug :)
Hier mal eine Funktion wo das Bild gesetzt wird.
Code: 
private void updateField(ImageButton ibtn, Card card, int position){
        try {
            if(card == null){
                ibtn.setBackgroundResource(R.drawable.no_card);
            } else {
                if(position > 4 && ((position % 2 != 0 && card.is_visible[0]) || (position % 2 == 0 && card.is_visible[1]) || (position >= 45))){
                    int resID = getResources().getIdentifier(card.card_img, "drawable", getPackageName());
                    ibtn.setBackgroundResource(resID);
                } else {
                    switch(card.type_card){
                    case 0:
                        ibtn.setBackgroundResource(R.drawable.card_clan_backview);
                        break;
                    case 1:
                        ibtn.setBackgroundResource(R.drawable.card_bund_backview);
                        break;
                    case 2:
                        ibtn.setBackgroundResource(R.drawable.card_spell_backview);
                        break;
                    }
                }
                card.position = position;
                if(Config.stage == 0){
                    Log.d("NEW_CARD_POS", "ID["+String.valueOf(card.id)+"] - POSITION["+String.valueOf(card.position)+"]");
                }
                //System.gc();
            }
        } catch (IllegalArgumentException e) {
            Log.e("IllegalArgumentException", e.toString());
        } catch (Exception e){
            Log.e("Exception", e.toString());
        }
    }

Ist natürlich nur eine Funktion, gibt noch einige andere. Müsste mich selbst erstmal wieder hinein finden, bald ein Jahr nix dran gemacht^^

Gruß,
Black NEXUS
Zum Vergrößern anklicken....

Hey also versuche es mal so wenn ein Fehler kommt geht's nicht.
Bei der switch case Methode muss die Animation rein.
Statt arg0 nimmt man im deinem fall ibtn.
Der Handler muss mit rein wegen den zwei halbe Animationen.
...
Eine Möglichkeit wäre auch wenn du per Layout eine onClick funktion einbringt.

Da die Animation vom backcover nur kommen sollen kann man noch eine boolean ein bringen mit einer if Methode.

LG freelager
 
Hiho,

also Click und longClick sind schon belegt bei den Buttons. War jetzt nur eine der Funktionen.

Verstehe ich das richtig, dass die Animation an sich garnix mit der Veränderung des Bildes zu tun hat, sondern nur den Effekt einbaut? Wenn das so ist, muss das Bild ja sicher nach der Animation geändert werden, oder? Ohne es jetzt getestet zu haben würde ich sagen, dass er die Animation beendet und dann plötzlich das Bild geändert wird. Ist halt schwer vorstellbar wenn man die Reihenfolge so sieht, ich hätte gedacht man muss das Bild mitgeben in welches die Animation über geht. Halt wie im Beispiel welches ich im Startpost verlinkt habe, diese Animation führt zu einem neuen Bild.

Auf jeden Fall teste ich dies heute Abend mal. Bin ziemlich gespannt auf das Resultat :)

freelager schrieb:
Hey also versuche es mal so wenn ein Fehler kommt geht's nicht.
Zum Vergrößern anklicken....
PS: Bester Satz überhaupt, ich kann mich fast nicht mehr :lol:

Gruß,
Black NEXUS
 
Die eine Hälfte der Animation ist egal aber die zweite nicht weil wen flip back ist muss das neue schon gewechselt sein auf das neue Bild das wegen muss die Animation in der Methode rein wo die Zahl aus gesucht wird mit der Zufall Methode.
Ich versuche mal ein example zu machen mit einer test Karte
 
Hiho freelage,

ich habe es heute endlich mal testen können :)

Muss noch ein paar Anmerkungen zu deinem Beispiel machen, aber ansonsten funzt es wunderbar :D


  • Die Animationen dürfen nicht final in der Klasse gesetzt werden, nur initialisiert. Der eigentliche Content wird dann z.B. bei onCreate gesetzt.
  • Die Funktion loadAnimation benötigt einen Context, welcher vorher definiert werden muss. Mit this gab es nur Probleme, warum auch immer :/
  • Wenn das Bild vor der FlipBack-Animation gewechselt wird, erscheint die Animation genau so wie sie soll.

Folgende Klasse ist eine andere als wie ich oben gezeigt habe. Damit man sich die Animation genau anschauen kann, habe ich noch eine Verzögerung von 5 Sekunden eingebaut.
Code: 
public class CardDetailedActivity extends Activity {
    Intent intent;
    ImageButton ibtn_detail;
    String card_img;
    Context context;
    Animation animFlip;
    Animation animFlipBack;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_detailed);
        View v = getLayoutInflater().inflate(R.layout.activity_card_detailed, null);
        v.setKeepScreenOn(true);
        ActionBar actionBar = getActionBar();
        actionBar.hide();
        
        intent = getIntent();
        card_img = intent.getStringExtra("card_img");
        context = this;
        animFlip = AnimationUtils.loadAnimation(context, R.anim.anim_flip);
        animFlipBack = AnimationUtils.loadAnimation(context, R.anim.anim_flipback);
        
        if(Config.stage == 0){
            Log.d("CARD_DETAIL", card_img);
        }
        
        initButton();
        
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            public void run() {
                Handler animateur = new Handler();
                animateur.postDelayed(new Runnable(){
                    @Override
                    public void run(){
                        ibtn_detail.setBackgroundResource(R.drawable.card_clan_backview);
                        ibtn_detail.startAnimation(animFlipBack);
                    }
                },250);
                ibtn_detail.startAnimation(animFlip);
            }
        }, 5000);
    }
    
    /**
     * Überschreiben der "Zurück-Taste"
     * 
     * @see android.app.Activity#onBackPressed
     */
    @Override
    public void onBackPressed() {
        finish();
    }
    
    /**
     * Initialisierung des Buttons
     */
    private void initButton(){
        try{
            ibtn_detail = (ImageButton) findViewById(R.id.ibtn_card_detail);
            int resID = getResources().getIdentifier(card_img, "drawable", getPackageName());
            ibtn_detail.setBackgroundResource(resID);
        } catch (IllegalArgumentException e) {
            Log.e("IllegalArgumentException", e.toString());
        } catch (Exception e){
            Log.e("Exception", e.toString());
        }
    }
}

Bin ja so froh, dass es doch noch eine Lösung gab, herzlichen Dank für deine Hilfe :3

MfG,
Black NEXUS
 
Kein Thema und bei weitern fragen mir eine pn schreiben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

S
Hilfe für FOSS Lern-App für Uhrzeit?
  • sorenn
Antworten
0
Aufrufe
100
sorenn
S
E
Geschlossener Test für meine App
  • evgkop
Antworten
1
Aufrufe
60
swa00
swa00
netfreak
App für Benachrichtigungen lesen
  • netfreak
Antworten
10
Aufrufe
479
netfreak
netfreak
Zurück
Oben Unten