はじめに
シルエットはサンタさん、色付けするとホームレス、Qiitaでは初めまして！あきらです。
アドベントの時しか記事書かないと思ってる方に、これだけは断言しておきたい！
そうです
さて約一年ぶりに書く記事があれなんですけどね。
会社で作ってるアプリについて書きたいと思います。
よっ！社畜！今日も働いてんね！
君の部屋の明かりが、どっかで夜景みながらいちゃついてるカップルの、感動の一部になってるぜ！
ﾌｩｰ⤴
消えてなくなりたい
概要
そんなこんなで
今回は初めてのQiitaってことで、キャンバスアプリでよく使う機能について書いてみたいと思います。
たぶん皆が通る道だと思います。
そうです。
「遊戯王みたいにカード選んだらシュパッ！ってなってほしい」っていうあれですね。
最近ポケ○ケってアプリ流行ってるけど、あんなカードめくるぜ？みたいな動きを作ってみようと思います。
なぜこんなもの作ってるかというと
弊社では毎朝「最近遭遇したオモロイこと」を話す、みたいなことをやってるんです。
古い会社やなー！テラワロス！って心清らかなみなさんは思ったかもしれませんが、
うちはフルリモート社員がたくさんいるので、こういうコミュニケーションが意外とハマったりするんです。
実際、日々様々な社員がオモロイ話をいっぱいしてくれます。
わたしがこないだ「変拍子の曲ってグッとくるよね！」っていう話をしました。
そうです、みんなポカンとしてました。
相手にされないってゾクゾクしますね。
司会担当の人がアプリの画面共有をしてもらって、社員をトランプに模して、当たった人がオモロイ話をするという仕組みです。
前々から
「選択したところから移動しないのキモイなー」と思っていたので、
ちょっと面白いわくわくするようなエフェクトで選択させようと思います。
作成したい動きがコチラ
その1 他のトランプよりも強調させる
まずは際立たせましょう。
簡単に言うと、選択したトランプ以外のトランプの透明度を低くする
という命令をしてみます。
透過度の設定は以下の部分で行いますが、
実際には四角形コントロールを使用して、カバーリングしてもいいかもしれません。
テクニカルな行動よりも、効率的で簡単な方法をかんがえるほうがモテます。
まずはトランプを作りましょう。
といってもPhotoshopひらいて、お絵かきからお願いしますってのはアレなので、
素材は持ってきたいと思います。
https://stock.adobe.com/jp/images/playing-cards-simplified-version-poker-set-with-isolated-cards-poker-playing-cards-full-deck/412959631
今回はコチラの素材を使っていきます。
もちろん四角形とか代替の画像でも問題ありません。
データソースはどうでもいいので、今回は10枚×3でギャラリー作っておきます。
Items=Sequence(30,0,1)
折り返し10でheightはSelf/3とかでいいですね
切り替えプロパティとかもポップなどにしておきましょうか。
資料の余白の大きさにこだわっちゃってMemberから嫌われがちな細かい性格の人は、カード総数がかわっても対応できるようにサイジングを関数化しておくといいでしょう。
たぶんモテませんけど。
これでカードが30枚3段で並べることが出来ました。
これで選択時に「選択したカードを選んだ！」って強調しておきたいと思います。
選択されたカードのみ透明度を固定して、それ以外のカードを透明度をすこしあげておきましょう。
ただ次の導線も考えて作成しておきたいので、
別の画像コントロールを同じ場所におく！ということをやって、
現在のギャラリーの透過度を上げる！ということを同時にやってみます。
まずはギャラリーの中にあるトランプ画像と同じサイズの画像を準備します。
カード選択時、この追加したカード単品を選択されたカードと同じ位置に、出現させます。
位相を合わせるには、絶対位置と相対位置を理解する必要があります。
なので、数式に当てはめるための準備をしておきましょう。
カードに列と行を定義します。
上の数字：Mod(ThisItem.Value,10)
下の数字：RoundDown(ThisItem.Value/10,0)
別にラベルは追加しなくてもいいですが、わかりやすくするために配置しておきます。
上の数字は列番号、下の数字が行番号を簡易的に作成したものです。
Power Automate for Desktopって表記に憤慨しちゃう細かい人は、カードが11列になっても対応できるように、関数にしておきましょう。
たぶんモテないけど。
出現する新しいカードのXとYは表にすると以下になると考えられます。
これを踏まえて単品カードの位相を変数にして、変数を単品カードのX、Yプロパティに突っ込んでおきましょう。
OnSelect＝
UpdateContext(
{
locCx: Parent.X + Self.Width * Mod(
ThisItem.Value,
10
),
locCy: Parent.Y + Self.Height * RoundDown(
ThisItem.Value / 10,
0
)
}
)
//ギャラリー内のカード
X：locCx//単品カードのX
Y：locCy//単品カードのCy
これでプレビューしてみると選択されたカードの位相に上のカードが合わさるのことがわかります。
（わかりやすくするために枠線を付けています）
コレと同時に選択したもの以外の透明度をさげてあげれば、なお選択したカードが際立つかと思います。
OnSelect＝
UpdateContext(
{
locCx: Parent.X + Self.Width * Mod(
ThisItem.Value,
10
),
locCy: Parent.Y + Self.Height * RoundDown(
ThisItem.Value / 10,
0
),
locCa:0.3
}
)
Transparency=locCa
//ギャラリー内のカード
これで「強調する」という作業が完了しました。
数学好きは別に細かいわけじゃないからモテます。
その2 選択したトランプを揺らす
まだその2とか絶望しかないですね。
読んでる皆さんもそうでしょうが、書いてるわたしもそうです。
今日クリスマスイブの早朝だぜ？
選んだカード揺らすことで、
みなさん待望の「こいつ…動くぞ？」感を出せます。
そして「揺らす」ということは「振動」ということは、そうです。
三角関数の出番です。
まずは皆さんならった三角関数の復習をしてみましょう。
お馴染みsinθのグラフです。
皆さんの家の玄関の壁に飾ってあることでしょう。
ここでわかることは、θの値がどれだけ増えても、周期的に-1から1までを繰り返す、ということです。
このグラフをつかって「振動」を数値的に表すことができます。
たとえば、振動の時間に対する幅をだんだんと強くする場合は、sin（θ²）としておけばいいですし、
たとえば、振動の大きさをだんだん強くする場合は単純にθsin(θ²)とかしておけばいいです。
これとタイマーコントロールでも使って、揺れを表現してみましょう。
タイマーコントロールを準備します。
タイマーコントロールに対して次の関数を仕込みます。
AutoStart＝locTimerStart
OnTimerEnd＝UpdateContext({locTimerStart:false})
//タイマーコントロール
次にギャラリー内カードのOnSelectに次の関数を加えます。
UpdateContext(
{
locCx: Parent.X + Self.Width * Mod(
ThisItem.Value,
10
),
locCy: Parent.Y + Self.Height * RoundDown(
ThisItem.Value / 10,
0
),
locCa: 0.3,
locTimerStart: true
}
)
//ギャラリー内のカードOnSelect全文
これでカード選択するとタイマーが動くようになりました。
このタイマーの数値を利用して、
単品カードのXに対して次のように編集します。
X=
locCx+5*Sin(Timer1.Value*20)
//タイマーの値に応じて振動する
これらを行うと以下のようになります。
揺れたね！やったね！！
応用すればあんなものうあこんなものを揺らすことができますねｸﾞﾍﾍ
鼻毛とかね・・・
その3 選択したトランプをピュッと画面外に逃がす
はい、何言ってるかわからないね。
なんていうかピュッと画面外に逃がしたいんですよ。わかりましたね？
実際の動画みたほうが早いです。
こういうことです。
わかりましたね？
わかっていただいてよかったです。
まずタイマーコントロールを置きます。
そして以下のようにプロパティ設定しましょう。
AutoStart＝locTimerStart2
OnTimerEnd＝UpdateContext({locTimerStart2:false})
//タイマーコントロール
そしてさきほど置いた1つ目のタイマーコントロールに以下を追加しておきます。
UpdateContext(
{
locTimerStart: false,
locTimerStart2: true
}
)
//locTimerStart2記述を追加
そしてそして単品カードのYプロパティを以下のように編集
Y=locCy-Timer2.Value*2.5
//Timer2の値に応じてYが変更される
そうするとピュッて飛んでいきます。
カードの話ですよ。
色々応用できそうですねグフフ
…鼻毛とｋ
その4 選択したトランプをヌッと上から時間差で登場させる
さぁ佳境です
ぬッと登場させましょう。
訳が分からない人はこれを見てひれ伏してください。
とても選んだ感が出たかと思います。
作っていきましょう。
あれです。
タイマーです。
設定しましょう。
名前はTimer3とします。
プロパティは以下。
Duration＝300
AutoStart＝locTimerStart3
OnTimerEnd＝UpdateContext({locTimerStart3:false})
//タイマーコントロールTimer3
そしてさきほど置いた2つ目のタイマーコントロールに以下を追加しておきます。
OnTimerEnd=
UpdateContext(
{
locTimerStart2: false,
locTimerStart3: true
}
)
//locTimerStart3記述を追加
ピュッと飛んでったカードが振ってくるように見せかけるために、
もう1枚カードのImageコントロールを追加しておきます。
画面外にあらかじめ追加しておいて、
Timer3の値に応じて、さがってくるようにコントロールしましょう。
Y=
-800+Timer3.Value*5
//新しく追加したカードImageコントロール
これでさきほどのように
揺れてピュッて飛んで、アレが大きくなって差し込まれます。
ITの話ですからね。
何かに応用できそうですけどね…
その5 選択したトランプがひらく
こちらは大した話ではないので、是非やってみてください。
こんな感じですね。
まぁアレです。
タイマーです。
おわりに
ね？くだらないでしょ？
タイマーでリレーしていくとこんな感じの動きも表現できます。
たとえばカードの残像を残したい！とか
カードが巻物みたいに開く！とか
カードくるくる回したい！とか
いろんなことを考えればできると思います。
業務アプリでカードめくることなんてあんまりないとは思いますけど、
たとえば忘年会のビンゴとか、
なんとか委員会の抽選とか、
クリスマスプレゼントを選んでもらうとかね！
抽選することって結構あるけど、楽しませたいじゃないですか！
驚きと感動を与えたいから、
喜んだ顔がみたいから、
白いひげを付けて、
赤い衣装に身を包み、
幸せな顔で何かを期待している子供の枕元に、
素敵な包装紙に包まれた感動と驚きを届けるのです。
そんな気持ちを思い出し、アプリにも感動と驚きを！
めりーくりすます！