Linie animiert verschieben

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

  • Linie animiert verschieben

    Hallo,

    ich mach grad meine ersten Versuche im zeichnen.

    Ich habe es jetzt schon geschafft eine Linie zu zeichnen :

    Quellcode

    1. CGPoint center = CGPointMake(x = 77, y = 77);
    2. CGPoint oben = CGPointMake(x = 77, y = 50);
    3. CGPoint unten = CGPointMake(x + (breite/2), y + breite);
    4. CGPoint links = CGPointMake(x = 50, y = 77);
    5. CGPoint rechts = CGPointMake(x = 104, y = 77);
    6. CAShapeLayer *line1 = [CAShapeLayer layer];
    7. UIBezierPath *line1Path = [UIBezierPath bezierPath];
    8. [line1Path moveToPoint: center];
    9. [line1Path addLineToPoint:rechts];
    10. line1.path = line1Path.CGPath;
    11. line1.fillColor = nil;
    12. line1.opacity = 1.0;
    13. line1.lineWidth = 3;
    14. line1.strokeColor = [UIColor blackColor].CGColor;
    15. [circle addSublayer:line1];
    Alles anzeigen

    jetzt will ich diese Linie um "center" nach "unten " animiert drehen. das soll 1 Sekunde dauern, so dass man das Drehen deutlich wahrnehmen kann.


    Quellcode

    1. [line1Path moveToPoint: center];
    2. [line1Path addLineToPoint:rechts];
    3. soll sich zu
    4. [line1Path moveToPoint: center];
    5. [line1Path addLineToPoint:unten];
    6. bewegen
    EDIT: Den Titel kann ich leider nicht mehr ändern. Ganz konkret will ich eine Linie um einen Mittelpunkt animiert drehen.Quasi wie ein Zeiger einer Uhr.


    Hat jemand einen Tipp für mich, wie ich das machen kann?
    Ich habe auch keine Loesung, aber ich bewundere das Problem!
    _____________________________________________________


    Hape42

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von hape42 () aus folgendem Grund: Frage konkretisiert

  • MCDan schrieb:

    Schau z.B. mal hier: CAShapeLayer in Depth, Part II
    vielen Dank für den link :thumbup:

    Habe noch nicht eine Zeile bis jetzt in Swift geschrieben <X
    Es ist etwas mühsam das umzusetzen so ganz ohne Ahnung von Swift.

    es dreht schon, aber nicht so wie es soll :rolleyes:

    Quellcode

    1. CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    2. pathAnimation.toValue = (__bridge id _Nullable)(endPath.CGPath);
    3. pathAnimation.duration = 1.0;
    4. pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    5. [lineFrom addAnimation:pathAnimation forKey:pathAnimation.keyPath];


    ursprünglich steht da ein strich senkrecht
    der dreht sich auch super nach links um 90 °
    Aber er springt wieder zurück in die Ursprungsposition
    wenn ich

    Quellcode

    1. lineFrom.path = endPath.CGPath;
    zum Schuss setze, steht der strich nach links ausgerichtet wie er soll, aber es gibt keine Animation mehr ?( ?( ?(
    Ich habe auch keine Loesung, aber ich bewundere das Problem!
    _____________________________________________________


    Hape42
  • ich hab jetzt drei Tage rumprobiert, gewundert, gestaunt, geärgert.

    jetzt hab ich langsam Frust.

    Ich wollte doch nur eben mal schnell einen Zeiger auf Knopfdruck von 3 auf 6 laufen lassen.

    Ich hab jetzt mal alles an Versuchen gelöscht und einfach zwei Kreise gezeichnet mit jeweils einem kleinen Zeiger. Dazu zwei Knöpfe die jeweils eine Animation auslösen.
    Das Mini-project hab ich mal als zip angehängt
    Vielleicht hat ja jemand Lust da mal reinzuschauen. Ich bin für jeden Hinweis dankbar.

    ich fürchte, ich mache irgendwas grundlegendes falsch, komme aber selbst nicht dahinter. ?(
    Dateien
    • testClock.zip

      (85,7 kB, 231 mal heruntergeladen, zuletzt: )
    Ich habe auch keine Loesung, aber ich bewundere das Problem!
    _____________________________________________________


    Hape42
  • Ich hab' zwar mal kurz in Deinen Code geschaut, dann aber eine Änderung verworfen: Ich würde das Thema etwas anders angehen und eine eigene UIView-Klasse für die Uhr (oder für unabhängige Zeigerbewegungen für jeden Zeiger) erstellen. In deren drawRect:-Methode wird ein Kreis und der Zeiger vom Mittelpunkt der bounds aus gezeichnet.

    Diese Subviews würde ich dann positionieren einfach um einen Winkel (hier 90°) rotieren.

    Das könne im entsprechenden übergeordneten ViewController dann so aussehen (wobei self.clock besagte Subview ist):

    Quellcode

    1. - (IBAction)rotateClock:(id)sender
    2. {
    3. CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI / 2.0f);
    4. [UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn
    5. animations:^{
    6. self.clock.transform = transform;
    7. }
    8. completion:^(BOOL finished){
    9. // do something if needed
    10. }
    11. ];
    12. }
    Alles anzeigen
    HTH, Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.
  • Vielleicht. Mal in's Unreine gesprochen:
    • Es gibt eine UIView uhr, die ein Property zeit und zwei überlagernde SubViews zeiger1, zeiger2 hat
    • Wenn zeit verändert wird, ermittelt uhr, um welchen Winkel zeiger1 und zeiger2 weitergedreht werden müssten
    • Dann animiert uhr das Drehen mittels der o. g. Methode. Hierbei müsste duration abhängig vom Winkel so berechnet werden, dass die Winkelgeschwindigkeit gleich bleibt
    • Zuletzt aktualisert uhr die zeit ... oder das Aktualisieren geschieht direkt in deren Setter
    Natürlich nur einer von vielen Wegen. Ich finde aber, er ist recht clean und kapselt gut, so dass man x Uhren parallel mit unterschiedlichen Zeiten laufen lassen könnte.

    Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.
  • MyMattes schrieb:

    Vielleicht. Mal in's Unreine gesprochen:
    In unreinen Code gegossen. ^^

    Ich muss sagen, wenn man lange nicht mehr mit Objective-C gearbeitet hat, muss man erst mal wieder rein kommen. Und ehrlich gesagt, viel Standard-Gedöns kommt mir inzwischen umständlich vor.

    Edit: Damit bei dem Beispiel auch was passiert, ein Tap auf das Display startet/stoppt die Animation.
    Dateien
    • RotateDemo.zip

      (21,49 kB, 241 mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Michael ()