টাইল বিভিন্ন ধরনের অ্যানিমেশন পদ্ধতি সমর্থন করে, যার মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত:
- টুইন অ্যানিমেশন ব্যবহার করে সুইপ ট্রানজিশন।
- টাইলের মধ্যে ও বাইরে স্মুথ ফেড ও স্লাইড অ্যানিমেশন।
- Lottie অ্যানিমেশন।
সুইপ ট্রানজিশন দেখানো
একটি ভ্যালু থেকে অন্য ভ্যালুতে মসৃণভাবে পরিবর্তন দেখাতে, আপনি কোনও এলিমেন্টের জন্য টুইন অ্যানিমেশন চালু করতে পারেন, যেমনটি নিম্নলিখিত কোড স্নপেটে দেখানো হয়েছে:
private var startValue = 15f private var endValue = 105f private val animationDurationInMillis = 2000L // 2 seconds override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> { val circularProgressIndicator = CircularProgressIndicator.Builder() .setProgress( FloatProp.Builder(/* static value */ 0.25f) .setDynamicValue( // Or you can use some other dynamic object, for example // from the platform and then at the end of expression // add animate(). DynamicFloat.animate( startValue, endValue, AnimationSpec.Builder() .setAnimationParameters( AnimationParameters.Builder() .setDurationMillis(animationDurationInMillis) .build() ) .build(), ) ) .build() ) .build() return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline(Timeline.fromLayoutElement(circularProgressIndicator)) .build() ) }
আর্কের দিকনির্দেশ সেট করা
আপনার টাইলে কোনও আর্ক থাকলে, আপনি হয়তো চান না যে আর্ক লাইন বা টেক্সট সবসময় ব্যবহারকারীর বেছে নেওয়া ভাষার জন্য ডিফল্ট টেক্সট ডিরেকশনে
বৃদ্ধি পাক। আর্ক বৃদ্ধির দিক নির্দিষ্ট করতে, ArcDirection API ব্যবহার করুন:
public override fun onTileRequest( requestParams: RequestBuilders.TileRequest ): ListenableFuture<Tile> { return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( EdgeContentLayout.Builder(deviceParameters) .setResponsiveContentInsetEnabled(true) .setEdgeContent( Arc.Builder() // Arc should always grow clockwise. .setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE) .addContent( ArcLine.Builder() // Set color, length, thickness, and more. // Arc should always grow clockwise. .setArcDirection( LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE ) .build() ) .build() ) .build() ) ) .build() ) }
স্মুথ ফেড বা স্লাইড দেখানো
কোনও টাইল থেকে কোনও এলিমেন্ট দেখা যাচ্ছে বা অদৃশ্য হয়ে যাচ্ছে তা আরও স্পষ্টভাবে বোঝাতে, অথবা কোনও টাইলের ভ্যালুতে ধাপে ধাপে পরিবর্তন আরও সূক্ষ্মভাবে দেখাতে, আপনার টাইল অ্যানিমেশনে ফেড ও স্লাইড ইফেক্ট ব্যবহার করুন।
কোনও টাইল লেআউটে এমন কোনও এলিমেন্ট থাকলে যার ভ্যালু পরিবর্তিত হয়, টাইলটি এলিমেন্টের এক্সিট অ্যানিমেশন দেখায়, তারপর লেআউট আপডেট করে এবং এলিমেন্টের এন্ট্রি অ্যানিমেশন দেখায়।
ফেড ট্রানজিশন
DefaultContentTransitions থেকে পাওয়া হেল্পার পদ্ধতি ব্যবহার করে কীভাবে ফেড-ইন ও ফেড-আউট
ট্রানজিশন পারফর্ম করতে হয় তা নিম্নলিখিত কোড স্নিপেট থেকে বোঝা যায়। কাস্টম FadeInTransition ও FadeOutTransition অবজেক্ট
সংজ্ঞায়িত করতে, ট্রানজিশন
সেটার পদ্ধতিতে যথাক্রমে setFadeIn() ও setFadeOut() কল করুন।
public override fun onTileRequest( requestParams: RequestBuilders.TileRequest ): ListenableFuture<Tile> { // Assumes that you've defined a custom helper method called // getTileTextToShow(). val tileText = getTileTextToShow() return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, tileText) .setModifiers( Modifiers.Builder() .setContentUpdateAnimation( AnimatedVisibility.Builder() .setEnterTransition(DefaultContentTransitions.fadeIn()) .setExitTransition(DefaultContentTransitions.fadeOut()) .build() ) .build() ) .build() ) ) .build() ) }
স্লাইড ট্রানজিশন
এই অন্য কোড স্নিপেটটি দেখায় যে কীভাবে DefaultContentTransitions থেকে হেল্পার পদ্ধতি ব্যবহার করে স্লাইড-ইন ও স্লাইড-আউট
ট্রানজিশন পারফর্ম করতে হয়। এছাড়াও, ট্রানজিশন সেটার পদ্ধতিতে
setSlideIn() ও setSlideOut() কল করে আপনি কাস্টম SlideInTransition ও SlideOutTransition অবজেক্ট
নির্ধারণ করতে পারবেন।
public override fun onTileRequest( requestParams: RequestBuilders.TileRequest ): ListenableFuture<Tile> { // Assumes that you've defined a custom helper method called // getTileTextToShow(). val tileText = getTileTextToShow() return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, tileText) .setModifiers( Modifiers.Builder() .setContentUpdateAnimation( AnimatedVisibility.Builder() .setEnterTransition( DefaultContentTransitions.slideIn( ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT ) ) .setExitTransition( DefaultContentTransitions.slideOut( ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT ) ) .build() ) .build() ) .build() ) ) .build() ) }
ট্রান্সফর্মেশন দেখানো
টাইলের কোনও নির্দিষ্ট এলিমেন্ট বা জায়গার দিকে দৃষ্টি আকর্ষণ করতে, আপনি এতে বিভিন্ন ধরনের ট্রান্সফর্মেশন প্রয়োগ করতে পারেন, যার মধ্যে রয়েছে: রোটেশন, স্কেলিং ও ট্রান্সলেশন।
ট্রান্সফর্মেশনের সাথে যুক্ত অনেক ফ্লোটিং-পয়েন্ট ভ্যালু ডায়নামিক এক্সপ্রেশন গ্রহণ করে, যা আপনাকে এইসব ট্রান্সফর্মেশন অ্যানিমেট করতে দেয়।
রোটেশন
কাস্টমাইজ করা যায় এমন পিভট পয়েন্টের চারপাশে ঘড়ির কাঁটার দিকে ঘোরানোর জন্য, নিম্নলিখিত কোডের মতো কোড ব্যবহার করুন:
return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, someTileText) .setModifiers( Modifiers.Builder() .setTransformation( ModifiersBuilders.Transformation.Builder() // Set the pivot point 50 dp from the left edge // and 100 dp from the top edge of the screen. .setPivotX(dp(50f)) .setPivotY(dp(100f)) // Rotate the element 45 degrees clockwise. .setRotation(degrees(45f)) .build() ) .build() ) .build() ) ) .build() )
স্কেলিং
হরাইজন্টাল ও ভার্টিক্যাল স্কেলিং ফ্যাক্টর দিয়ে কোনও এলিমেন্টকে বড় বা ছোট করতে, নিম্নলিখিত কোডের মতো কোড ব্যবহার করুন:
return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, someTileText) .setModifiers( Modifiers.Builder() .setTransformation( ModifiersBuilders.Transformation.Builder() // Set the pivot point 50 dp from the left edge // and 100 dp from the top edge of the screen. .setPivotX(dp(50f)) .setPivotY(dp(100f)) // Shrink the element by a scale factor // of 0.5 horizontally and 0.75 vertically. .setScaleX(FloatProp.Builder(0.5f).build()) .setScaleY(FloatProp.Builder(0.75f).build()) .build() ) .build() ) .build() ) ) .build() )
জ্যামিতিক অনুবাদ
স্ক্রিন জুড়ে নির্দিষ্ট সংখ্যক ডেনসিটি পিক্সেল (dp) দিয়ে কোনও এলিমেন্ট অনুভূমিক বা উল্লম্বভাবে সরাতে, নিম্নলিখিত কোডের মতো কোড ব্যবহার করুন:
return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, someTileText) .setModifiers( Modifiers.Builder() .setTransformation( ModifiersBuilders.Transformation.Builder() // Translate (move) the element 60 dp to the right // and 80 dp down. .setTranslationX(dp(60f)) .setTranslationY(dp(80f)) .build() ) .build() ) .build() ) ) .build() )
Lottie অ্যানিমেশন
Tiles, Lottie অ্যানিমেশন প্লেব্যাক করতে পারে, এর সিনট্যাক্স ছবির সিনট্যাক্সের মতোই হয়:
class LottieAnimation : TileService() { val lottieResourceId = "lottie_animation" override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> { val layout = LayoutElementBuilders.Image.Builder() .setWidth(dp(150f)) .setHeight(dp(150f)) .setResourceId(lottieResourceId) .build() return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline(Timeline.fromLayoutElement(layout)) .build() ) } override fun onTileResourcesRequest( requestParams: ResourcesRequest ): ListenableFuture<Resources> { val lottieImage = ResourceBuilders.ImageResource.Builder() .setAndroidLottieResourceByResId( ResourceBuilders.AndroidLottieResourceByResId.Builder(R.raw.lottie) .setStartTrigger(createOnVisibleTrigger()) .build() ) .build() return Futures.immediateFuture( Resources.Builder() .setVersion(requestParams.version) .addIdToImageMapping(lottieResourceId, lottieImage) .build() ) } }
মনে রাখার মতো কয়েকটি পয়েন্ট:
- Lottie ফাইলের শুধুমাত্র একটি সাবসেট কাজ করে। নিম্নলিখিত ভ্যালিডেটরগুলির
একটি ব্যবহার করে মানানসই কিনা চেক করুন:
- অনলাইন ভ্যালিডেটর: https://skottie.skia.org/. "মানানসই রিপোর্ট" বিভাগে, ফাইলটিকে "স্পেসিফিকেশন সংক্রান্ত সমস্যা", "স্পেসিফিকেশন সংক্রান্ত সতর্কতা" (সাধারণ প্রপার্টি উপেক্ষা করা হয়েছে) এবং "কম পাওয়ার প্রোফাইল সংক্রান্ত সমস্যা" পরীক্ষাগুলি পাস করতে হবে।
- Rust-এর একটি ভ্যালিডেশন লাইব্রেরি: https://github.com/google/lottie-tools.
- Lottie প্লেব্যাক অন্তত
1মেজর ভার্সন এবং অন্তত500মাইনর ভার্সন সহ টাইল রেন্ডারার দ্বারা কাজ করে। প্রদত্ত অ্যানিমেশন কাজ না করলে, অ্যানিমেশনটি দেখা যাবে না, তবে বাকি টাইলের রেন্ডারিং যেমন হওয়ার কথা তেমনই হবে। প্রয়োজন হলে, আপনি ফলব্যাক বিকল্প দিতে পারেন, যেমন কোনও স্ট্যাটিক ছবি।
অ্যানিমেশনের মাঝে গুরুত্বপূর্ণ তথ্য দেখাবেন না
বিভিন্ন পরিস্থিতিতে অ্যানিমেশন বন্ধ করা হয়:
- সিস্টেমের টাইল রেন্ডার সব টাইল অ্যানিমেশন বন্ধ করে দিতে পারে।
- একটি টাইলে একবারে শুধুমাত্র ৪টি এলিমেন্ট অ্যানিমেট করা যায়। আপনি একই সাথে ৪টির বেশি এলিমেন্ট অ্যানিমেট করার চেষ্টা করলে, সবকটিতে অ্যানিমেশন দেখা যাবে না।
অ্যানিমেশন বন্ধ করা থাকলে, এলিমেন্টগুলি স্ট্যাটিক থাকে এবং অ্যানিমেশনের শেষ ভ্যালু দেখায়। এই কারণে, গুরুত্বপূর্ণ তথ্য দেখানোর জন্য অ্যানিমেশনের আচরণ, যেমন এর সময়সীমার উপর নির্ভর করবেন না।