2016-08-20 10 views
0

イメージが水平方向に左から右にスクロールし、イメージの終端に水平に到達したときに繰り返すビューコントローラのアニメーション化された背景イメージを作成しようとしています。この効果は、SpriteKitを使用したゲームでは非常に一般的ですが、UIKitを使用して標準のView Controllerで行う方法については明確な情報がありません。余分なポイントあなたはどのようにナビゲーションバーの下部ではなく、ビューコントローラの上部に画像のトップ境界を設定する:)Viewcontroller水平のアニメーションの背景画像

ここで私に言うことができる場合はイメージです。 backgroundimage

答えて

1

使用の2つのコピー画像。画面全体を占める1つの画像から始めます。もう一つはその左側にある。 2番目のコピーが最初のコピーを画面から外します。アニメーションが終わりに達したら、ただ1つのコピーが完全に画面を占めているので、先頭に戻り、繰り返します。画像が同一でジャンプが同じ位置にあるときにジャンプが実行されるため、ジャンプは表示されません。

私が今説明した動作は、繰り返しのCABasicAnimationのデフォルトです。すべての繰り返しの最後に自動的に開始点にジャンプします。このように、私は非常に迅速に(スウィフト3、iOSの10)の概念実証を書くことができました:します。https:// youtu

let im = UIImage(named:"stuff")! 
    // create double image 
    let r = UIGraphicsImageRenderer(size: 
     CGSize(width:im.size.width*2,height:im.size.height)) 
    let im2 = r.image { _ in 
     im.draw(at: .zero) 
     im.draw(at: CGPoint(x: im.size.width, y: 0)) 
    } 
    // create layer to hold double image 
    let imlay = CALayer() 
    imlay.frame.size = im2.size 
    imlay.contents = im2.cgImage 
    // put it inside a single-image-sized container 
    let scroll = CALayer() 
    scroll.frame = CGRect(origin: .zero, size: im.size) 
    scroll.masksToBounds = true 
    scroll.addSublayer(imlay) 
    scroll.bounds.origin = CGPoint(x:im.size.width, y:0) 
    // put it in the interface 
    self.view.layer.addSublayer(scroll) 
    // animate 
    let anim = CABasicAnimation(keyPath: "bounds.origin") 
    anim.toValue = NSValue(cgPoint: .zero) 
    anim.duration = 10 
    anim.repeatCount = .infinity 
    scroll.add(anim, forKey: nil) 
+0

を私は結果を表示するには、YouTubeの動画を設置しました。 be/wRf3plbSd1g私のテストイメージはあなたのイメージの一部分に過ぎませんでしたが、違いはありません。あなたが見ることができるように、効果は右への連続スクロールです。 – matt

+0

マットこれは素晴らしいです。これをしてくれてありがとう、それは完璧に働いた。 – jwhubert91

+0

私はあなたがそれを好きだと分かっていました。助けてうれしく思います。この例をまとめることは、私が行っていたことよりずっと面白かったです! – matt

1
You can achieve it by setting the `frame` of your `imageview` within an animation block like below: 


func animate(){ 
     imageView.frame.origin.x = 0 
     UIView.animateWithDuration(2, delay: 0.0, options: .CurveLinear, animations: {[unowned self]() -> Void in 

      self.imageView.frame.origin.x = self.view.frame.size.width 
      }) {[unowned self] (finsihed) -> Void in 
       self.animate() 
     } 

    } 
関連する問題