Question

SITUTATION：

我创造了一个脉动动画，但它确实有效。

使用repeatForever属性，我能够按照我想要的那样连续。

但有一个问题仍然是我做了很多研究之后无法修复。

说明

唯一的问题是我不知道如何再添加一个动画，使图像在再次脉动之前恢复原始大小。

我面临的挑战在于，如果我在另一个之后声明它，它将不会被调用，因为它不会被包含在repeatForever循环中。

因此，我现在拥有的动画并不流畅，因为一旦完成，图像会在重复之前立即恢复原始大小。

发生什么：

1）图像脉动到1.2当前大小thx到动画。

这不是很光滑：

2）动画在1.2处完成，图像立即“扭曲”回到1.0

3）动画重演。图像再次脉动到1.2。

问题：如何更改pulsatingAnimation，以便我的图像在再次脉动之前以平滑的方式恢复原始尺寸？

CODE：

import Foundation
import pop

class AnimationEngine {

    func pulsate(object: UIImageView) {
        let pulsateAnim = POPSpringAnimation(propertyNamed: kPOPLayerScaleXY)
        pulsateAnim.velocity = NSValue(CGSize: CGSizeMake(0.1, 0.1))
        pulsateAnim.toValue = NSValue(CGSize: CGSizeMake(1.2, 1.2))
        pulsateAnim.springBounciness = 18
        pulsateAnim.dynamicsFriction = 20
        pulsateAnim.springSpeed = 1.0
        pulsateAnim.repeatForever = true
        // pulsateAnim.autoreverses = true
        object.layer.pop_addAnimation(pulsateAnim, forKey: "layerScaleSpringAnimation")
    }
}

Answer 1

我找到了解决方案。

<强> SOLUTION：

func pulsate(object: UIImageView) {
    let pulsateAnim = POPSpringAnimation(propertyNamed: kPOPLayerScaleXY)
    let returnToSizeAnim = POPBasicAnimation(propertyNamed: kPOPLayerScaleXY)

    object.layer.pop_addAnimation(pulsateAnim, forKey: "layerScaleSpringAnimation")
    pulsateAnim.velocity = NSValue(CGSize: CGSizeMake(0.1, 0.1))
    pulsateAnim.toValue = NSValue(CGSize: CGSizeMake(1.2, 1.2))
    pulsateAnim.springBounciness = 30
    pulsateAnim.dynamicsFriction = 20
    pulsateAnim.springSpeed = 1.0
    pulsateAnim.completionBlock = {(animation, finished) in
        object.layer.pop_addAnimation(returnToSizeAnim, forKey: "layerScaleSpringAnimation")
    }
    returnToSizeAnim.toValue = NSValue(CGSize: CGSizeMake(1.0, 1.0))
    returnToSizeAnim.duration = 0.5
    returnToSizeAnim.completionBlock = {(animation, finished) in
        object.layer.pop_addAnimation(pulsateAnim, forKey: "layerScaleSpringAnimation")
    }
}

func pulsate2(object: UIImageView) {
    let pulsateAnim = POPSpringAnimation(propertyNamed: kPOPLayerScaleXY)
    let returnToSizeAnim = POPBasicAnimation(propertyNamed: kPOPLayerScaleXY)

    object.layer.pop_addAnimation(pulsateAnim, forKey: "layerScaleSpringAnimation")
    pulsateAnim.velocity = NSValue(CGSize: CGSizeMake(0.1, 0.1))
    pulsateAnim.toValue = NSValue(CGSize: CGSizeMake(1.2, 1.2))
    pulsateAnim.springBounciness = 30
    pulsateAnim.dynamicsFriction = 20
    pulsateAnim.springSpeed = 1.0
    pulsateAnim.completionBlock = {(animation, finished) in
        object.layer.pop_addAnimation(returnToSizeAnim, forKey: "layerScaleSpringAnimation")
    }
    returnToSizeAnim.toValue = NSValue(CGSize: CGSizeMake(1.0, 1.0))
    returnToSizeAnim.duration = 0.5
    returnToSizeAnim.completionBlock = {(animation, finished) in
        object.layer.pop_addAnimation(pulsateAnim, forKey: "layerScaleSpringAnimation")
    }
}

<强> N.B：

我需要为每个想要使用它的对象声明一个脉动函数。如果我不这样做，第二次调用该函数时，由于动画实例已经在运行，因此无法正常工作。

Answer 2

我不知道Facebook pop，所以我只谈及如何实现此功能的分析和逻辑（脉冲效应）

正如我在评论中写的那样，你想要做的事情似乎正是SpriteKit中多次发生的事情，在那里你要制作一个特定的动画（SKAction），必须建立一个一系列行动。

仅举一个SpriteKit示例，这就是我做的具体脉冲效果：

let titleForward = runTitleForward()
let wait = SKAction.waitForDuration(5.0)
let titleBackward = runTitleBackward()
let titleAnim = SKAction.repeatActionForever((SKAction.sequence([titleForward, wait, titleBackward,wait ])))
title.runAction(titleAnim, withKey:"titleAnimation")

func runTitleForward()-> SKAction {
        let atlascTexturesArray = self.myManager.atlascTexturesDictionary["title-anim"]
        let texturesAction = SKAction.animateWithTextures(atlascTexturesArray!,timePerFrame: 0.09)        
        return texturesAction
    }

func runTitleBackward()-> SKAction {
    let texturesAction = runTitleForward()
    let texturesReverseAction = SKAction.reversedAction(texturesAction)
    return texturesReverseAction()
}

希望您在UIKit中帮助做同样的事情。

更新 :(我不测试它..）

func delayAnimation(duration:NSTimeInterval)-> CABasicAnimation {
   let animation : CABasicAnimation = CABasicAnimation(keyPath: "opacity");
   animation.delegate = self
   animation.fromValue = 1 
   animation.toValue = 1  // fake animation, just to obtain duration delay..
   animation.duration = duration
   return animation
}

func pulseElements () -> (POPSpringAnimation,POPSpringAnimation) {

        // zoom in
        let pulsateInAnim = POPSpringAnimation(propertyNamed: kPOPLayerScaleXY)
        pulsateInAnim.velocity = NSValue(CGSize: CGSizeMake(0.1, 0.1))
        pulsateInAnim.toValue = NSValue(CGSize: CGSizeMake(1.2, 1.2))
        pulsateInAnim.springBounciness = 18
        pulsateInAnim.dynamicsFriction = 20
        pulsateInAnim.springSpeed = 1.0

        // zoom out
        let pulsateOutAnim = POPSpringAnimation(propertyNamed: kPOPLayerScaleXY)
        ...

        return (pulsateInAnim,pulsateOutAnim)
}

func pulseAnimation() {
     let (pulsateInAnim,pulsateOutAnim) = pulseElements()
     let wait = delayAnimation(1.0)
     var pulseAnimationGroup: CAAnimationGroup = CAAnimationGroup()
     pulseAnimationGroup.animations = [pulsateInAnim, wait,  pulsateOutAnim, wait]
     pulseAnimationGroup.duration = 0.5
     pulseAnimationGroup.repeatCount = Float.infinity
     object.layer.addAnimation(pulseAnimationGroup, forKey: layerScaleSpringAnimation)
}

Answer 3

我是一个巨大的ReactiveCocoa书呆子所以我在POPAnimation附近构建了一个类，所以我可以用更实用的方式处理动画。

import Foundation
import ReactiveCocoa
import pop
import Result

/**
 `UIView` wrapper for performing reactive-based pop animations.
 */
public struct ReactivePOPView<View: UIView> {

    /// View object
    private weak var view: View?
    /// `SignalProducer` object when the wrapper is about to deallocate.
    private let willDealloc: SignalProducer<Void, NoError>

    /// Wrapper on the view property.
    private var animator: View? { return self.view }

    /**
     Create an animation wrapper with a view.

     - parameter view: `UIView` object.
     */
    public init(_ view: View) {
        self.view = view
        self.willDealloc = view
            .willDeallocSignalProducer()
        }
}

/**
 Binds a `Signal` that emits an animation object to a `ReactivePOPView`.

 - parameter view:   `ReactivePOPView` object.
 - parameter signal: `Signal` object.

 - returns: `Disposable` object.
 */
 public func <~ <T, Animation: POPAnimation>(view: ReactivePOPView<T>, signal: Signal<Animation, NoError>) -> Disposable {
    let disposable = CompositeDisposable()
    let viewDisposable = view.willDealloc.startWithCompleted {
        disposable.dispose()
    }
    disposable.addDisposable(viewDisposable)

    let signalDisposable = signal.observe(Observer(next: {
        view.animator?.pop_addAnimation($0, forKey: $0.name ?? "")

    }, completed: {
        disposable.dispose()
    }))
    disposable.addDisposable(signalDisposable)
    return disposable
}

/**
 Binds a `SignalProducer` that emits an animation object to a `ReactivePOPView`.

 - parameter view:     `ReactivePOPView` object.
 - parameter producer: `SignalProducer` object.

 - returns: `Disposable` object.
*/
public func <~ <T, Animation: POPAnimation>(view: ReactivePOPView<T>, producer: SignalProducer<Animation, NoError>) -> Disposable {
    var disposable: Disposable!
    producer.startWithSignal { signal, signalDisposable in
        view <~ signal
        disposable = signalDisposable

        view.willDealloc.startWithCompleted {
            signalDisposable.dispose()
        }
    }
    return disposable
}

/**
 Bind a reactive animation property to a `ReactivePOPView` property.

 - parameter destinationProperty: `ReactivePOPView` property.
 - parameter sourceProperty:      Animation property.

 - returns: `Disposable` object.
 */
public func <~ <T, P: PropertyType where P.Value == POPAnimation>(destinationProperty: ReactivePOPView<T>, sourceProperty: P) -> Disposable {
    return destinationProperty <~ sourceProperty.producer
}

通过这门课程，您可以执行以下操作：

ReactivePOPView<UIButton>(self.loginButton) <~ self.someSignal.signal
.flatMap(.Concat) { _ in SignalProducer<POPBasicAnimation, NoError> in
    let animation ...
    // construct animation here
    return SignalProducer(value: animation)
}
.repeat(0)

如果你想要的话，我也有一个约束包装类。

如何在连续的repeatForever中链接Facebook pop动画？

3 个答案: