CSS animationをChatGPTとGoogle Bardに作らせてみる
ベトナム語文法変換スクリプトに生成イラストを付与するようになってから、自分のiPhone13 miniの縦画面だとセリフが小さくて読みづらいなと感じていた。
それで検索して調べると色々な手法があるようだった。
普通、プログラムの世界では車輪の再発明はしないという原則があり、既に存在しているプログラムがあるなら一から作らずに使わせてもらい、手間を減らすのが一般的である。
しかし、JavascriptもCSSも再学習中の私にとっては練習の一環なので既存のスクリプトを流用はせず、ロジックを確認して自分で実装するのが良いと判断して実装。
CSSのclassで拡大時のclass、zoomを別途用意してJavascriptでclassを書き換える。
この方針として実装。ちょっと悩んだところもあったが無事実装完了。
タップして拡大するだけでなく、再度タップすると縮小する処理も実装完了。
ここまで来て、拡大、縮小時にアニメーションで徐々に拡大、徐々に縮小するようにしたいと思った。
またちょっと調べるとCSSのアニメーション処理にはtransitionとanimationがあるらしい事がわかる。
どちらで実装するのが良いかはちょっとわからなかった。
そこでふと思った。ChatGPTに聞いてみようと。
以下のCSS class right_sideからzoomにjavascriptで切り替えます
その際にcss animationで50%から100%に1秒で変化させたいです
css animationを追加してほしい
.right_side{
width:50%;
float:right;
}
.zoom{
width:100%;
float:right;
}
このアニメーションは、.right_side要素の幅を変更する際に1秒の時間をかけて滑らかにアニメーションさせます。.zoomクラスに切り替えるだけで、幅がアニメーション付きで変化します。
このCSSをHTMLファイルの<style>タグ内に追加するか、外部のCSSファイルに保存してリンクしてください。
CSS animationではなくtransitionを用いている。
そして.zoomクラスに切り替えるとアニメーション付きで変化すると説明があるが、どう見ても.right_sideに切り替えるときにアニメーション付きになり、.zoomの拡大時にはアニメーションしない。
説明とCSSが逆になっている。
しかし、まぁ人間が間違いに気がつけば十分役に立つ。
拡大側の.zoomにもtransitionを追加して実装してみるとなめらかに拡大縮小出来るようになった。
ChatGPT-4にも同じように依頼すると、同じコードが生成された。つまり同じミスをしている。GPT-4の違いはどこでアニメーションを指定しているかをコメントに記載されている点と、Javascriptでclassを切り替える方法も付記されていた点。
こうなるとGoogle Bardにも確認してみたくなる。
このCSSを追加することで、.right_sideクラスの要素の幅が50%から100%に1秒かけてアニメーションで変化します。
.gif)
コメント
コメントを投稿