Advances in UIKit Animations and Transitions

新的API優點: Fluid, Responsive, Natural, Smooth

  • Timing Functions
    UIView.animate(withDuration:2.0, delay: 0.0,
    options:[.linear]) {
    circle.center.x = 800.0
    }


    linear.png

    curve.png
  • UIViewPropertyAnimator


    relationship.png
    let timing   = UICubicTimingParameters(animationCurve: .easeInOut)
    let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters:timing)
    animator.addAnimations {
     // frame, center, alpha, and transform
    self.squareView.center = CGPoint(x: 800.0, y: self.squareView.center,y)
    self.squareView.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_2))
    }
      animator.addCompletion {_ in
      self.squareView.backgroundColor = UIColor.orange()
    }
    animator.startAnimation()
    
  • 標準初始化后

startAnimation()

  • 立即開始動畫(類方法)

runningPropertyAnimator(withDuration:delay:options:animations:completion:)

  • State


    State transitions for an animator object.png

var state: UIViewAnimatingState { get }
var isRunning: Bool { get }
var isReversed: Bool { get set }

  • 動態修改動畫

  • Start, pause, resume, and stop animations

  • Add animation blocks
    addAnimations(:) and addAnimations(:delayFactor:)

  • Scrub through a paused animation by modifying the fractionComplete property.

  • Change the animation’s direction using the isReversed property.

  • Modify the timing and duration of a partially complete animation by pausing the animation and using the continueAnimation(withTimingParameters:durationFactor:) method to finish it.

UIViewAnimating

  • Every newly created animator starts off in the inactive state. Similarly, an animator that has finished its animations returns to the inactive state.

  • pauseAnimation() method :paused so that you can modify those animations.

  • stopAnimation(_:) method: the animator object moves to the stopped or inactive state and must be reconfigured before it can be used again.

Timing providers

A cubic Bézier timing curve.png
// 1
UICubicTimingParameters()

UICubicTimingParameters(animationCurve: .linear)

UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0),
                        controlPoint2: CGPoint(x:1.0,y:0.0))

// 2
UISpringTimingParameters()

UISpringTimingParameters(dampingRatio: 0.8,
                      initialVelocity: CGVector(dx:1.0, dy: 0.0))

UISpringTimingParameters(mass: CGFloat, stiffness: CGFloat,
                      damping: CGFloat, initialVelocity velocity: CGVector)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 文/鳳 媽媽的臥室里,一臺老式縫紉機靜靜地立在窗下一隅。機身油漆斑駁,暗黃色的三合板臺面,邊角已經開裂,微微向上翹...
    鳳兒有約閱讀 741評論 0 7
  • 若是世界和平 城市里沒有風云 鄉村一片寧靜 我會選擇一生只做孩子 年紀總會像一盞古舊的 略顯凄寒的秋風 如何藏匿像...
    Cactussnow閱讀 189評論 0 0
  • 具萬味林凈菜所了解魚肉味道鮮美,不論是食肉還是作湯,都清鮮可口,引人食欲,是人們日常飲食中比較喜愛的食物。魚類種類...
    萬味林凈菜閱讀 585評論 0 0