CGAffineTransform échelle à la traduction et à sauter avant l'animation

Je suis aux prises avec un problème concernant les CGAffineTransform échelle et translation, où lorsque j'ai mis une transformation dans un bloc d'animation sur une vue qui a déjà de transformer le point de vue des sauts un peu avant d'animer.

Exemple:

//somewhere in view did load or during initialization
var view = UIView()
view.frame = CGRectMake(0,0,100,100)
var scale = CGAffineTransformMakeScale(0.8,0.8)
var translation = CGAffineTransformMakeTranslation(100,100)
var concat = CGAffineTransformConcat(translation, scale)
view.transform = transform

//called sometime later
func buttonPressed() {
    var secondScale = CGAffineTransformMakeScale(0.6,0.6)
    var secondTranslation = CGAffineTransformMakeTranslation(150,300)
    var secondConcat = CGAffineTransformConcat(secondTranslation, secondScale)
    UIView.animateWithDuration(0.5, animations: { () -> Void in 
         view.transform = secondConcat
    })

}

Maintenant, quand buttonPressed() est appelée le point de vue des sauts vers le haut à gauche d'environ 10 pixels avant de commencer à animer. J'ai seulement assisté à cette question avec un concat transformer, à l'aide seulement d'une traduction de transformation fonctionne très bien.

Edit: Depuis que j'ai fait beaucoup de recherches sur la question, je pense que je devrais mentionner que ce problème apparaît indépendamment de si oui ou non la mise en page automatique est activée

Si vous utilisez CGAffineTransformTranslate(secondScale,150,300)?
Le résultat est exactement le même
Ce qui ne "saute un peu"? Est-il de retour à l'identité de transformation? Est-il animer secondConcat de la sauter ou sauter, de retour à concat, animer à secondConcat?
Avez-vous jamais résoudre ce problème? Actuellement, le débogage le même problème ici.
malheureusement, je n'ai pas. J'ai fini par en enroulant une vue à l'intérieur d'une autre afin que je puisse traduire la vue sur l'extérieur et à l'échelle de la vue de l'intérieur. De cette façon j'ai pu contourner le problème.

OriginalL'auteur matteok | 2015-01-13

  1. 36

    J'ai rencontré le même problème, mais ne pouvait pas trouver la source exacte du problème. Le saut semble n'apparaître que dans des conditions très particulières: Si le point de vue anime à partir d'une transformation t1 à une transformation t2 et les deux transformations sont une combinaison d'une échelle et d'une translation (qui est exactement votre cas). Compte tenu de la solution de contournement suivante, qui n'a pas de sens pour moi, je suppose que c'est un bug dans le Noyau de l'Animation.

    Tout d'abord, j'ai essayé d'utiliser CATransform3D au lieu de CGAffineTransform.

    Ancien code:

    var transform = CGAffineTransformIdentity
transform = CGAffineTransformScale(transform, 1.1, 1.1)
transform = CGAffineTransformTranslate(transform, 10, 10)
view.layer.setAffineTransform(transform)

    Nouveau code:

    var transform = CATransform3DIdentity
transform = CATransform3DScale(transform, 1.1, 1.1, 1.0)
transform = CATransform3DTranslate(transform, 10, 10, 0)
view.layer.transform = transform

    Le nouveau code doit être équivalent à l'ancienne (le quatrième paramètre est réglé sur 1.0 ou 0 de sorte qu'il n'y a pas de mise à l'échelle/la traduction en z direction), et en fait, il montre le même saut. Cependant, voici la magie noire: À l'échelle de la transformation, le changement de la z paramètre à quelque chose de différent de 1.0, comme ceci:

    transform = CATransform3DScale(transform, 1.1, 1.1, 1.01)

    Ce paramètre ne doit avoir aucun effet, mais maintenant le saut est allé.

    ✨

    Je pense que cette réponse n'a pas obtenu assez de crédits... j'ai été codant pour les jours et ne pouvait pas résoudre ce problème.
    ☝️Idem. J'ai rencontré le même problème avec une simple échelle et de la traduction. La couche serait "déplacer" vers la gauche un peu en avant de l'animation. L'application d'un 1.01 échelle de la z axe fixe le problème.

    OriginalL'auteur Theo

  2. 4

    Ressemble à Apple UIView animation bug interne. Quand Apple interpole CGAffineTransform changements entre les deux valeurs pour créer une animation, il devrait faire comme suit:

    • Extrait de la traduction, l'échelle et la rotation
    • Interpoler les valeurs extraites forme du début à la fin
    • Assembler CGAffineTransform pour chaque étape d'interpolation

    L'assemblage doit être dans l'ordre suivant:

    • Traduction
    • De mise à l'échelle
    • Rotation

    Mais ressemble à Apple de faire la traduction après la mise à l'échelle et la rotation. Ce bug devrait être corrigé par Apple.

    OriginalL'auteur k06a

  3. 0

    Au lieu de CGAffineTransformMakeScale() et CGAffineTransformMakeTranslation(), qui créent une transformation à partir d'CGAffineTransformIdentity (en gros, pas de transformation), vous souhaitez mettre à l'échelle et de les traduire en fonction de l'affichage de la transformation en cours à l'aide de CGAffineTransformScale() et CGAffineTransformTranslate(), qui commencent avec la transformation existante.

    J'ai réellement besoin de définir une absolue transformation lors de l'animation, ce qui signifie que je ne veux pas ajouter à l'existant transformer, mais de le remplacer animé
    Aussi, j'ai juste essayé d'utiliser CGAffineTransformTranslate au lieu de CGAffineTransformMakeTranslate et le problème reste le même.

    OriginalL'auteur Dave Batton

  4. 0

    La source du problème est le manque de perspective de l'information pour la transformer.

    Vous pouvez ajouter de la perspective de l'information de la modification de la m34 propriété de votre transformation 3d

    var transform = CATransform3DIdentity
transform.m34 = 1.0 / 200 //your own perspective value here
transform = CATransform3DScale(transform, 1.1, 1.1, 1.0)
transform = CATransform3DTranslate(transform, 10, 10, 0)
view.layer.transform = transform
    Pourriez-vous expliquer un peu plus et aussi pourquoi ceci 'magie' œuvres?

    OriginalL'auteur Snit

  5. 0

    Je ne sais pas pourquoi, mais ce code peut fonctionner

    mise à jour:

    J'ai réussi à combiner l'échelle, la traduction et la rotation de l'ensemble, de tout transformer etat à une nouvelle transformation de l'état.

    Je pense que la transformation est réinterprété au début de l'animation.

    le point d'ancrage de commencer à transformer est considéré dans la transformation de nouveau, et puis nous convertir à la vieille transformation.

    self.v  = UIView(frame: CGRect(x: 50, y: 50, width: 50, height: 50))
self.v?.backgroundColor = .blue
self.view.addSubview(v!)
func buttonPressed() {
let view = self.v!
let m1 = view.transform
let tempScale = CGFloat(arc4random()%10)/10 + 1.0
let tempRotae:CGFloat = 1
let m2 = m1.translatedBy(x: CGFloat(arc4random()%30), y: CGFloat(arc4random()%30)).scaledBy(x: tempScale, y: tempScale).rotated(by:tempRotae)
self.animationViewToNewTransform(view: view, newTranform: m2)
}    
func animationViewToNewTransform(view: UIView, newTranform: CGAffineTransform) {
//1. pointInView.apply(view.transform) is not correct point.
//the real matrix is mAnchorToOrigin.inverted().concatenating(m1).concatenating(mAnchorToOrigin)
//2. animation begin trasform is relative to final transform in final transform coordinate
//anchor and mAnchor
let normalizedAnchor0 = view.layer.anchorPoint
let anchor0 = CGPoint(x: normalizedAnchor0.x * view.bounds.width, y: normalizedAnchor0.y * view.bounds.height)
let mAnchor0 = CGAffineTransform.identity.translatedBy(x: anchor0.x, y: anchor0.y)
//0->1->2
//let origin = CGPoint(x: 0, y: 0)
//let m0 = CGAffineTransform.identity
let m1 = view.transform
let m2 = newTranform
//rotate and scale relative to anchor, not to origin
let matrix1 = mAnchor0.inverted().concatenating(m1).concatenating(mAnchor0)
let matrix2 = mAnchor0.inverted().concatenating(m2).concatenating(mAnchor0)
let anchor1 = anchor0.applying(matrix1)
let mAnchor1 = CGAffineTransform.identity.translatedBy(x: anchor1.x, y: anchor1.y)
let anchor2 = anchor0.applying(matrix2)
let txty2 = CGPoint(x: anchor2.x - anchor0.x, y: anchor2.y - anchor0.y)
let txty2plusAnchor2 = CGPoint(x: txty2.x + anchor2.x, y: txty2.y + anchor2.y)
let anchor1InM2System = anchor1.applying(matrix2.inverted()).applying(mAnchor0.inverted())
let txty2ToM0System = txty2plusAnchor2.applying(matrix2.inverted()).applying(mAnchor0.inverted())
let txty2ToM1System = txty2ToM0System.applying(mAnchor0).applying(matrix1).applying(mAnchor1.inverted())
var m1New = m1
m1New.tx = txty2ToM1System.x + anchor1InM2System.x
m1New.ty = txty2ToM1System.y + anchor1InM2System.y
view.transform = m1New
UIView.animate(withDuration: 1.4) {
view.transform = m2
}
}

    J'ai aussi essayer de le zScale solution, il semble également fonctionner si la valeur zScale non-1 lors de la première transformation ou à chaque transformation

        let oldTransform = view.layer.transform
let tempScale = CGFloat(arc4random()%10)/10 + 1.0
var newTransform = CATransform3DScale(oldTransform, tempScale, tempScale, 1.01)
newTransform = CATransform3DTranslate(newTransform, CGFloat(arc4random()%30), CGFloat(arc4random()%30), 0)
newTransform = CATransform3DRotate(newTransform, 1, 0, 0, 1)
UIView.animate(withDuration: 1.4) {
view.layer.transform = newTransform
}

    OriginalL'auteur lbsweek