Buttons umdrehen wie in Musik-App?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Buttons umdrehen wie in Musik-App?

    Hallo,

    ich habe in der Musik-App meines iPods einen wirklich schönen Effekt gesehen: Wenn man dort auf "Sie hören" tippt, wird der aktuelle Titel dargestellt. Oben rechts ist dann so ein Menü-Button und wenn man diesen Button antippt, dreht sich Dieser um und wird zu einem Notenschlüssel.

    Wie kann ich nun aber diesen Animations-Effekt am einfachsten in einer App umsetzen? Irgendwie mag ich die Buttons :] , die kann man wunderbar anpassen und per [sender tag] auch den angetippten finden. Bei Buttons fehlt mir nur irgendwie der Ansatz, wie man diese animiert mit individueller Vorder- und Rückseite umdrehen kann. Löst man so etwas mit Buttons oder eher mit Hilfe von ImageViews in Kombination mit TapGestureRecognizern? Oder etwas ganz anderem?

    LG,
    4Bit

  • Buttons animierst du genauso wie alle anderen Views aus.

    Dieser Dreheffekt wird idR erreicht in dem du den Button zur hälfte drehst (und du nur noch die Kante dessen siehst), dann das Bild wechselst und zurück drehst. Also genaugenommen drehst du den Button gar nicht wirklich auf seine rückseite, sonder lässt es nur so aussehen.

    Grüße
    kleinweby

  • Hallo kleinweby,

    kleinweby schrieb:

    Dieser Dreheffekt wird idR erreicht in dem du den Button zur hälfte drehst (und du nur noch die Kante dessen siehst), dann das Bild wechselst und zurück drehst. Also genaugenommen drehst du den Button gar nicht wirklich auf seine rückseite, sonder lässt es nur so aussehen.
    vielen Dank, ich habe das mal versucht:

    Quellcode

    1. UIImage *imageneu = [UIImage imageNamed:@"test.png"];
    3. [UIView animateWithDuration:1.0
    4. delay:0.0
    5. options:(UIViewAnimationOptionCurveEaseInOut)
    6. animations:^{
    7. [sender layer].transform = CATransform3DMakeRotation(0.5 * M_PI,0.0,1.0,0.0);
    8. }
    9. completion:^(BOOL finished) {
    11. [UIView animateWithDuration:0.0
    12. delay:0.0
    13. options:(UIViewAnimationOptionCurveEaseInOut)
    14. animations:^{
    15. [sender setImage:imageneu forState:UIControlStateNormal];
    16. }
    17. completion:^(BOOL finished) {
    18. [UIView animateWithDuration:1.0
    19. delay:0.0
    20. options:(UIViewAnimationOptionCurveEaseInOut)
    21. animations:^{
    22. [sender layer].transform = CATransform3DMakeRotation(M_PI,0.0,1.0,0.0);
    23. }
    24. completion:^(BOOL finished) {
    26. }
    27. ];
    28. }
    29. ];
    30. }
    31. ];
    Alles anzeigen


    Da fehlt natürlich noch etwas zum "echten" Flip, wo während der Drehung anscheinend auch die Größe und die Helligkeit variiert wird. Aber es geht schon in die Richtung. Der Button ist bereits im IB mit einem Bild belegt, dreht sich und zeigt dabei dann das neue Bild an. Was ich nicht verstehe ist, warum ich bei der zweiten Drehung M_PI nehme. Sind das nicht 180 Grad? Trotzdem funktioniert es mit diesen Werten bzw. es funktioniert nicht, wenn ich nach festlegen des zweiten Bildes mit 0.5 * M_PI drehe.

    Hallo macmoonshine,

    macmoonshine schrieb:

    Du kannst dafür auch einfach zwei Views aufeinanderlegen, da ein um 180° (um die x- oder y-Achse) gedrehter View standardmäßig seine gespiegelte Vorderseite als Rückseite verwendet.
    vielen Dank für Deinen Tipp. Ich habe es bei mir so implementiert(scheint zu funktionieren):

    Quellcode

    1. - (IBAction)TapGestureErkannt:(id)sender {
    2. [UIView transitionWithView:[sender view] duration:2.0
    3. options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
    4. [[sender view].subviews.lastObject setHidden:![[sender view].subviews.lastObject isHidden]];
    5. }
    6. completion:^(BOOL finished) {
    8. }
    9. ];
    10. }


    LG,
    4Bit