Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
Android開発者のためのFlutter説明文がためになったので全訳&要約 - Qiita
View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不
iOSのアニメーションあれこれ(Objective-C/Swift(※随時更新中)) - Qiita
iOSで使うアニメーションあれこれをまとめてみました。アニメーションはクオリティの高いアプリ作成をしたいときにとても重要なものになります。この記事では、小さめのサンプルとともに、基本的なアニメーションの実装方法について記述していきます。 0. アニメーションとは Wikipediaによると... アニメーション（英語: animation）は、動画（どうが）とも呼ばれ、コマ撮りなどによって、複数の静止画像により動きを作る技術。連続して変化する絵や物により発生する仮現運動を利用した映像手法である。 連続して変化する絵や物により発生する仮現運動を作る方法をさらっと見ていきましょう。 1. NSTimerを使ったアニメーション 時間ごとに状態を更新することによってアニメーションを行います。 移動・点滅・拡大縮小を行ってみましょう。 ①移動 @implementation ViewControll
【iOS】【小ネタ】UIButtonは同時押しが出来る！！！ | DevelopersIO
こんぬづは、案件が一段落してブログフィーバータイム入ってる無双モード田中です。 今回は小ネタとして、UIButtonが同時押しできちゃう話です。 UIButtonは同時押しが出来る！！！ UIButtonといえば.TouchUpInsideをイベントトリガーとして処理を実行するというパターンがとても多いかと思われますが、例えば二つのボタンを同時にTouchUpInsideしてしまうと両方の処理も実行したりとか、意図しない動きをすることがあります。 これは注意が必要です。 例えば以下二つなど。 ①：完了までに時差のない処理 ②：View要素のアニメーションによる描画・遷移などの完了までに時差のある処理 それぞれの対応法をちょっと考えてみました。 ①の対処 処理の完了までに時差のない類のもので、同時押しさせたくないView要素に対しては以下の一行でオーケー。 button.exclusiveT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
