Zenn
🎄

camlファイルのメモ（確認済みのみ）（執筆途中）

2023/05/08に公開
iOS
Swift
Apple
#
format
#
caml
tech

camlのドキュメントがどこにもないので。

基本的な

一枚の画像を表示する。

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">

    <!-- 画像を表示 -->
    <CALayer>
        <contents type="CGImage" src=""/>
    </CALayer>
    
</caml>

2枚以上の画像を表示する。
CALayerには一つの要素しか入らないので、sublayersを使う。

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">

    <!-- 画像を表示 -->
    <CALayer>
        <sublayers>
            <contents type="CGImage" src=""/>
            <contents type="CGImage" src=""/>
        </sublayers>
    </CALayer>
    
</caml>

色々使えるプロパティ。

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">

    <!-- 画像を表示 -->
    <CALayer プロパティ名="" プロパティ名="">
        <contents type="CGImage" src="" プロパティ名=""/>
    </CALayer>
    
</caml>
共通のプロパティ

bounds: 幅と高さ
例：　bounds="width height"
　　　bounds="100 200"
position: 場所
例：　position="x座標 y座標"
　　　position="100 200"
hidden: 非表示 0 or 1
例：　hidden="0 or 1"
　　　hidden="1"
backgroundColor: 背景色。 rgbを指定できる。1が最大なので各値を255で割ってください。
例：　backgroundColor="r g b"
　　　backgroundColor="1 1 1"
transform: 回転
例：　transform="scale(x, y, z)"
　　　transform="scale(0.35, 0.35, 1)"
opacity: 不透明度 0 ~ 1
例：　opacity="0 ~ 1"
　　　opacity="0.5"
id: アニメーションで使う（次項）
例：　id="#chikuwan"
name: アニメーションで使う（次項）
例：　name="chikuwan"

状態遷移

以下は状態遷移で画像を切り替えるための最小コードです。
statesで状態ごとのプロパティの状態を指定します。

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">
    <CALayer>
    
	<!-- 画像を表示 -->
        <sublayers>
            <contents type="CGImage" src="./01.png" id="#1"/>
            <contents type="CGImage" src="./02.png" id="#2"/>
        </sublayers>
	
	<!-- 状態ごとのプロパティの状態 -->
        <states>
	　  <!-- locked のとき -->
            <LKState name="locked">
                <elements>
                    <LKStateSetValue targetId="#1" keyPath="opacity">
                        <value type="integer" value="1"/>
                    </LKStateSetValue>
                    <LKStateSetValue targetId="#2" keyPath="opacity">
                        <value type="integer" value="0"/>
                    </LKStateSetValue>
                </elements>
            </LKState>
	    
	　  <!-- unlocked のとき -->
            <LKState name="unlocked">
                <elements>
                    <LKStateSetValue targetId="#1" keyPath="opacity">
                        <value type="integer" value="0"/>
                    </LKStateSetValue>
                    <LKStateSetValue targetId="#2" keyPath="opacity">
                        <value type="integer" value="1"/>
                    </LKStateSetValue>
                </elements>
            </LKState>
        </states>
	
    </CALayer>
</caml>

statesで状態ごとのプロパティの状態を定義しています。
targetIdに対象要素のidを指定し、対象要素のどのプロパティを変更するかをkeyPathで指定しています。

状態遷移　+　切り替わりアニメーション

以下は状態遷移に切り替わりアニメーションを追加した最小コードです。
stateTransitionsでアニメーションを指定します。

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">
    <CALayer>
    
	<!-- 画像を表示 -->
        <sublayers>
            <contents type="CGImage" src="./01.png" id="#1"/>
            <contents type="CGImage" src="./02.png" id="#2"/>
        </sublayers>
	
	<!-- 状態ごとのプロパティの状態 -->
        <states>
	　  <!-- locked のとき -->
            <LKState name="locked">
                <elements>
                    <LKStateSetValue targetId="#1" keyPath="opacity">
                        <value type="integer" value="1"/>
                    </LKStateSetValue>
                    <LKStateSetValue targetId="#2" keyPath="opacity">
                        <value type="integer" value="0"/>
                    </LKStateSetValue>
                </elements>
            </LKState>
	    
	　  <!-- unlocked のとき -->
            <LKState name="unlocked">
                <elements>
                    <LKStateSetValue targetId="#1" keyPath="opacity">
                        <value type="integer" value="0"/>
                    </LKStateSetValue>
                    <LKStateSetValue targetId="#2" keyPath="opacity">
                        <value type="integer" value="1"/>
                    </LKStateSetValue>
                </elements>
            </LKState>
        </states>
	
	<!-- 状態遷移アニメーションの定義 -->
	<stateTransitions>
	    <!-- locked から unlocked になるときのアニメーション -->
	    <LKStateTransition fromState="locked" toState="unlocked">
                <elements>
                    <LKStateTransitionElement key="opacity" targetId="#1">
                        <animation type="CABasicAnimation" keyPath="opacity" duration="1" />
		    </LKStateTransitionElement>
                    <LKStateTransitionElement key="opacity" targetId="#2">
                        <animation type="CABasicAnimation" keyPath="opacity" duration="1" />
                    </LKStateTransitionElement>
                </elements>
            </LKStateTransition>
	    
	    <!-- unlocked から locked になるときのアニメーション -->
	    <LKStateTransition fromState="unlocked" toState="locked">
                <elements>
                    <LKStateTransitionElement key="opacity" targetId="#1">
                        <animation type="CABasicAnimation" keyPath="opacity" duration="1" />
		    </LKStateTransitionElement>
                    <LKStateTransitionElement key="opacity" targetId="#2">
                        <animation type="CABasicAnimation" keyPath="opacity" duration="1" />
                    </LKStateTransitionElement>
                </elements>
            </LKStateTransition>
        </stateTransitions>
	
    </CALayer>
</caml>
animationタグで使えるプロパティ

type: アニメーションの種類
例：　type="種類"
　　　CABasicAnimation 一般的なアニメーション
　　　CASpringAnimation バネのようなアニメーション
duration: 何秒で状態遷移が完了するか
例：　duration="秒"
　　　duration="1.4"
repeatCount: アニメーションを繰り返す回数
例：　repeatCount="回数 or Inf(無限)"
　　　repeatCount="Inf"
timingFunction: トランジション効果
例：　timingFunction="効果"
　　　default 通常効果
　　　linear 等しい速度
　　　easeInEaseOut 加速減速がある、自然なアニメーション
fillMode: アニメーション終了時の状態
例：　fillMode="状態"
　　　backwards 一番最初の状態に戻って終わる
autoreverses: 逆再生する
例：　autoreverses="0 or 1"
　　　autoreverses="1"
removedOnCompletion: 最後の停止位置を逆に
例：　removedOnCompletion="0 or 1"
　　　removedOnCompletion="1"
speed: 速度
例：　speed="float"
beginTime: 開始するまでの時間
例：　beginTime="float"

ーーーーーー
keyPath で transform="scale(0.35, 0.35, 1)" のような複雑なプロパティを指定するには
keyPath="transform.rotation.z"
keyPath="position.x"

ループアニメーション

これは状態遷移ではなく、アニメーションは自動的に開始されます。

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">
    <CALayer contentsFormat="RGBA8" name="shackle" opacity="1">
	    
	<!-- 画像を表示 -->
        <sublayers>
		
	    <!-- １個目 -->	
            <CALayer>
                <contents type="CGImage" src="./01.png" />
                <animations>
                    <animation type="CAKeyframeAnimation" keyPath="opacity" autoreverses="0" duration="0" repeatCount="Inf" speed="0.1" calculationMode="discrete"> 
                        <values>
                            <real value="1" />
                            <real value="0" />
		        </values>
                    </animation>
                </animations>
            </CALayer>
		
	    <!-- ２個目 -->
            <CALayer>
                <contents type="CGImage" src="./02.png" />
                <animations>
                    <animation type="CAKeyframeAnimation" keyPath="opacity" autoreverses="0" duration="0" repeatCount="Inf" speed="0.1" calculationMode="discrete">
                        <values>
		            <real value="1" />
                            <real value="0" />
			</values>
		    </animation>
		</animations>
	    </CALayer>
		
	</sublayers>
	    
    </CALayer>
</caml>

CAEmitterCell (パーティクルの発生)

<?xml version="1.0" encoding="UTF-8"?>
<caml xmlns="http://www.apple.com/CoreAnimation/1.0">
    <CALayer>
        <sublayers>
            <CAEmitterLayer beginTime="-100" birthRate="1" bounds="0 0 640 1136"
                cullRect="-10 -10 660 1.797693134862e308"
                emitterPosition="320 1146"
                emitterShape="line" emitterSize="700 0" geometryFlipped="0"
                hidden="0" position="320 568"
                scale="0.2" speed="1" transform="scale(10, 10, 1)">
                <emitterBehaviors>
                    <CAEmitterBehavior behavior="wave" force="-50 0 0"
                        frequency="0.5"
                        name="wave" />
                </emitterBehaviors>
                <emitterCells>
                    <CAEmitterCell alphaRange="0" alphaSpeed="0"
                        birthRate="com.birthRate" contentsScale="1"
                        emissionLatitude="0"
                        emissionLongitude="0"
                        emissionRange="0.2617993950844" enabled="1"
                        lifetime="com.lifetime" mass="5" massRange="1" name="large"
                        particleType="sprite" scale="com.bscale"
                        scaleRange="com.scaleRange" scaleSpeed="0" spinRange="com.spinRange"
                        velocity="com.bvelocity"
                        velocityRange="com.velocityRange" xAcceleration="11.913470178843"
                        yAcceleration="com.yAcceleration">
                        <contents
                            src="./01.png"
                            type="CGImage" />
                    </CAEmitterCell>

                    <!-- multiple possible -->
                    <!-- <CAEmitterCell alphaRange="0.2000000029802" alphaSpeed="0"
                                    birthRate="40" contentsScale="1"
                                    emissionLatitude="0"
                                    emissionLongitude="0"
                                    emissionRange="0.2617993950844" enabled="1"
                                    lifetime="10" mass="5" massRange="1" name="large"
                                    particleType="sprite" scale="0.6999999880791"
                                    scaleRange="1" scaleSpeed="0"
                                    velocity="300"
                                    velocityRange="200" xAcceleration="11.913470178843"
                                    yAcceleration="50">
                                    <contents
                                          src="/var/mobile/Documents/straight_tamago/Animation/03.png"
                                          type="CGImage" />
                              </CAEmitterCell> -->
                </emitterCells>
            </CAEmitterLayer>
        </sublayers>
    </CALayer>
</caml>
CAEmitterCellタグで使えるプロパティ

birthRate: 発生率
例：　birthRate="float"
velocity: 加速度
例：　velocity="float"
velocityRange: velocityの+-?
例：　velocityRange="float"

Discussion