iOS アニメーションアニメーション-4-4: CALayer サブクラス: CAReplicatorLayer_html/css

iOS アニメーションアニメーション-4-4: CALayer サブクラス: CAReplicatorLayer_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:20:55

オリジナル

1167 人が閲覧しました

まず第一に、これは一連の記事であり、このトピックの下にある他の記事を参照すると、この記事を理解するのに役立ちます。

前の記事では、CAShpeLayer を紹介し、2 つの例を示しました。よりクリエイティブであれば、これらによって以前は想像できなかったアニメーション効果を作成できます。

今日は CAReplication について説明します
CAReplication はコピーレイヤーであり、必要に応じてレイヤーを複数のコピーにコピーできます。まず CALayer に基づいて追加された API を見てみましょう

API の説明

instanceCount	繰り返されるインスタンスレイヤーの数(以下、インスタンスと呼びます)
instanceDelay	インスタンスの継続時間
instanceTransform	インスタンスアニメーション
instanceColor	Instanceカラー
インスタンスレッドオフセット	レッドオフセット
instanceGreenOffset	Green Offset
instanceBlueOffset	Blue Offset
instanceAlphaOffset	透明オフセット

・
今日は菊を例にします。効果は次のとおりですデモのダウンロード

もちろん、私は怠け者なので、tableView プルダウンのオフセットの代わりにスライダーを使用しました。

実装プロセスも非常に簡単です。CAReplicatorLayerを作成しましょう。

var replicatorLayer = CAReplicatorLayer()replicatorLayer.frame = someView.boundssomeView.layer.addSublayer(replicatorLayer)

ログイン後にコピー

説明
同様に、someView は、ストーリーボードで作成された View です
サイズを指定して、someView のレイヤーに追加します

実際、この菊の花は、多数の反復された長方形のレイヤーで構成されています。次に、長方形のレイヤーが必要になります

var instanceLayer = CALayer()let layerWidth: CGFloat = 10.0let midX = CGRectGetMidX(someView.bounds) - layerWidth / 2instanceLayer.frame = CGRect(x: midX, y: 0.0, width: layerWidth, height: layerWidth * 2.5)instanceLayer.backgroundColor = UIColor.whiteColor().CGColorreplicatorLayer.addSublayer(instanceLayer)

ログイン後にコピー

説明
ここで作成された小さな長方形のレイヤーは、instanceLayer と呼ばれます
それをreplicatorLayerに追加します

このように書くと、これは単にreplicatorLayerをビューに配置し、次に長方形のレイヤーを追加します。レプリケーターレイヤーのプロパティの設定を開始できます

最初にカラーを設定します

replicatorLayer.instanceColor = UIColor.grayColor().CGColor//        replicatorLayer.instanceRedOffset = 0.0//        replicatorLayer.instanceGreenOffset = 0.0//        replicatorLayer.instanceBlueOffset = 0.0//        replicatorLayer.instanceAlphaOffset = 0.0

ログイン後にコピー

説明
自分でカラーオフセットを調整して、何が変化するかを確認してください

ストーリーボード上にスライダーを作成し、ドラッグラインを使用します強力な人物を生成する方法

 @IBAction func slider(sender: UISlider) {        let count: Int = Int(sender.value * 30)        replicatorLayer.instanceCount = count        if sender.value == 1 {            replicatorLayer.instanceDelay = CFTimeInterval(1.0 / Double(count))            addAnimation()        }else{            if faderAnimation != nil {                instanceLayer.opacity = 1.0               instanceLayer.removeAnimationForKey("fader")            }        }        replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(Float(M_PI * 2.0) * sender.value / Float(count)), 0.0, 0.0, 1.0)    }

ログイン後にコピー

説明
instancCount を、slider の値に応じて変更するように設定します。instanc タイプ
は 1 秒間持続し、Count レイヤーを生成するのに必要な時間を表します
slider の値が 1.0 の場合、アニメーションを削除し、不透明度を 1 に設定します
instanceTransform、アニメーションを設定します、上記は Z 軸を中心とした 3D アニメーションの回転角度です

アニメーションを追加します

func addAnimation() {        faderAnimation = CABasicAnimation(keyPath: "opacity")        faderAnimation.fromValue = 1.0        faderAnimation.toValue = 0.0        faderAnimation.duration = 1        faderAnimation.repeatCount = Float(Int.max)        instanceLayer.opacity = 0.0        instanceLayer.addAnimation(faderAnimation, forKey: "fader")    }

ログイン後にコピー

必要に応じて、アニメーションの説明はしませんアニメーションについて知っている方は、このトピックの下の過去の記事をお読みください