আপনি নিম্নলিখিত সহ কয়েকটি ভিন্ন উপায়ে আপনার টাইলগুলি অ্যানিমেট করতে পারেন:
- টুইন অ্যানিমেশন ব্যবহার করে সুইপ ট্রানজিশন ।
- একটি টাইলের মধ্যে এবং বাইরে মসৃণ বিবর্ণ এবং স্লাইড অ্যানিমেশন।
একটি সুইপ ট্রানজিশন দেখান
একটি মান থেকে অন্য মানতে একটি মসৃণ সুইপ দেখানোর জন্য, আপনি একটি উপাদানের জন্য টুইন অ্যানিমেশন সক্ষম করতে পারেন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:
কোটলিন
private val defaultValue = 0f
private var startValue = 15f
private var endValue = 105f
private val animationDurationInMillis = 2000f // 2 seconds
override fun onTileRequest(requestParams: TileRequest) =
Futures.immediateFuture(
// Add timeline and layout containers. CircularProgressIndicator is an
// inner element of those containers.
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()
// Finish building all elements that contain CircularProgressIndicator.
)
জাভা
private float defaultValue = 0f;
private float startValue = 15f;
private float endValue = 105f;
private float animationDurationInMillis = 2000f; // 2 seconds
@Override
protected ListenableFuture<Tile> onTileRequest(
@NonNull TileRequest requestParams
) {
return Futures.immediateFuture(
// Add timeline and layout containers. CircularProgressIndicator is an
// inner element of those containers.
new CircularProgressIndicator.Builder()
.setProgress(
new 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,
new AnimationSpec.Builder()
.setAnimationParameters(
new AnimationParameters.Builder()
.setDurationMillis(animationDurationInMillis)
.build()
).build()
)
).build()
).build()
// Finish building all elements that contain CircularProgressIndicator.
);
}
চাপ দিক সেট করুন
যদি আপনার টাইলে একটি চাপ থাকে, তাহলে আপনি হয়তো চান না যে ব্যবহারকারীর নির্বাচিত ভাষার জন্য আর্ক লাইন বা টেক্সট সবসময় ডিফল্ট টেক্সট ডিরেকশনে বাড়ুক। একটি চাপ বৃদ্ধির দিক নির্দিষ্ট করতে, ArcDirection API ব্যবহার করুন:
কোটলিন
@OptIn(ProtoLayoutExperimental::class)
public override fun onTileRequest(
requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
EdgeContentLayout.Builder(deviceParameters)
.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()
)
}
জাভা
@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
@NonNull RequestBuilders.TileRequest requestParams
) {
return Futures.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new EdgeContentLayout.Builder(deviceParameters)
.setEdgeContent(
new Arc.Builder()
// Arc should always grow clockwise.
.setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
.addContent(
new 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() কল করুন।
কোটলিন
@OptIn(ProtoLayoutExperimental::class)
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(
ModifiersBuilders.Modifiers.Builder()
.setContentUpdateAnimation(AnimatedVisibility.Builder()
.setEnterTransition(
DefaultContentTransitions.fadeIn())
.setExitTransition(
DefaultContentTransitions.fadeOut()
).build())
).build())
).build()
)
}
জাভা
@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
@NonNull RequestBuilders.TileRequest requestParams
) {
// Assumes that you've defined a custom helper method called
// getTileTextToShow().
String tileText = getTileTextToShow();
return Futures.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, tileText)
.setModifiers(
new ModifiersBuilders.Modifiers.Builder()
.setContentUpdateAnimation(new AnimatedVisibility.Builder()
.setEnterTransition(
DefaultContentTransitions.fadeIn())
.setExitTransition(
DefaultContentTransitions.fadeOut())
.build())
.build()))
.build()
);
}
স্লাইড ট্রানজিশন
এই অন্য কোড স্নিপেট দেখায় কিভাবে DefaultContentTransitions থেকে হেল্পার পদ্ধতি ব্যবহার করে স্লাইড-ইন এবং স্লাইড-আউট ট্রানজিশন সম্পাদন করতে হয়। আপনি ট্রানজিশন সেটার পদ্ধতিতে যথাক্রমে setSlideIn() এবং setSlideOut() কল করে কাস্টম SlideInTransition এবং SlideOutTransition অবজেক্টকে সংজ্ঞায়িত করতে পারেন।
কোটলিন
@OptIn(ProtoLayoutExperimental::class)
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(
SLIDE_DIRECTION_LEFT_TO_RIGHT)
).setExitTransition(
DefaultContentTransitions.slideOut(
SLIDE_DIRECTION_LEFT_TO_RIGHT)
).build()
).build()
).build()
)).build()
)
}
জাভা
@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
@NonNull RequestBuilders.TileRequest requestParams
) {
// Assumes that you've defined a custom helper method called
// getTileTextToShow().
String tileText = getTileTextToShow();
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, tileText)
.setModifiers(
new Modifiers.Builder()
.setContentUpdateAnimation(
new AnimatedVisibility.Builder()
.setEnterTransition(
DefaultContentTransitions.slideIn(
SLIDE_DIRECTION_LEFT_TO_RIGHT))
.setExitTransition(
DefaultContentTransitions.slideOut(
SLIDE_DIRECTION_LEFT_TO_RIGHT))
.build())
.build())
.build()))
.build()
);
}
একটি রূপান্তর দেখান
একটি টাইলের একটি নির্দিষ্ট উপাদান বা এলাকায় মনোযোগ আকর্ষণ করতে, আপনি এটিতে বিভিন্ন ধরণের রূপান্তর প্রয়োগ করতে পারেন, যার মধ্যে রয়েছে: ঘূর্ণন, স্কেলিং এবং অনুবাদ।
রূপান্তরের সাথে যুক্ত অনেক ফ্লোটিং-পয়েন্ট মান ডায়নামিক এক্সপ্রেশন গ্রহণ করে, যা আপনাকে এই রূপান্তরগুলিকে অ্যানিমেট করতে দেয়।
ঘূর্ণন
একটি কাস্টমাইজযোগ্য পিভট পয়েন্ট সম্পর্কে ঘড়ির কাঁটার দিকে ঘূর্ণন করতে, নিম্নলিখিতগুলির মতো কোড ব্যবহার করুন:
কোটলিন
// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
Text.Builder(this, someTileText)
.setModifiers(
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(50))
.setPivotY(dp(100))
// Rotate the element 45 degrees clockwise.
.setRotation(
degrees(45f)
).build()
).build())
).build()
)
জাভা
// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, someTileText)
.setModifiers(
new 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(50))
.setPivotY(dp(100))
// Rotate the element 45 degrees clockwise.
.setRotation(
degrees(45f))
.build())
.build()))
.build()
);
স্কেলিং
অনুভূমিক এবং উল্লম্ব স্কেলিং ফ্যাক্টর দ্বারা একটি উপাদান বৃদ্ধি বা সঙ্কুচিত করতে, নিম্নলিখিত অনুরূপ কোড ব্যবহার করুন:
কোটলিন
// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
Text.Builder(this, someTileText)
.setModifiers(
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(50))
.setPivotY(dp(100))
// Shrink the element by a scale factor
// of 0.5 horizontally and 0.75 vertically.
.setScaleX(TypeBuilders.FloatProp.Builder(0.5f)
.build())
.setScaleY(TypeBuilders.FloatProp.Builder(0.75f)
.build()
).build()
).build())
).build()
)
জাভা
// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, someTileText)
.setModifiers(
new 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(50))
.setPivotY(dp(100))
// Shrink the element by a scale factor
// of 0.5 horizontally and 0.75 vertically.
.setScaleX(new TypeBuilders.FloatProp.Builder(0.5f)
.build())
.setScaleY(new TypeBuilders.FloatProp.Builder(0.75f)
.build())
.build())
.build()))
.build()
);
জ্যামিতিক অনুবাদ
অনুভূমিকভাবে বা উল্লম্বভাবে স্ক্রীন জুড়ে একটি নির্দিষ্ট সংখ্যক ঘনত্ব পিক্সেল (dp) দ্বারা একটি উপাদান সরাতে, নিম্নলিখিতগুলির অনুরূপ কোড ব্যবহার করুন:
কোটলিন
// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
Text.Builder(this, someTileText)
.setModifiers(
ModifiersBuilders.Transformation.Builder()
// Translate (move) the element 60 dp to the right
// and 80 dp down.
.setTranslationX(dp(60))
.setTranslationY(dp(80))
.build()
).build())
).build()
)
জাভা
// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, someTileText)
.setModifiers(
new ModifiersBuilders.Transformation.Builder()
// Translate (move) the element 60 dp to the right
// and 80 dp down.
.setTranslationX(dp(60))
.setTranslationY(dp(80))
.build())
.build()))
.build()
);
অ্যানিমেশনের মাঝখানে গুরুত্বপূর্ণ তথ্য দেখাবেন না
অ্যানিমেশনগুলি অক্ষম করা হয় এমন বিভিন্ন পরিস্থিতিতে রয়েছে:
- সিস্টেমের টাইল রেন্ডার সমস্ত টাইলের জন্য অ্যানিমেশন অক্ষম করতে পারে৷
- একটি টাইল একবারে মাত্র 4টি উপাদান অ্যানিমেট করতে পারে। আপনি যদি একই সময়ে 4টির বেশি উপাদান অ্যানিমেট করার চেষ্টা করেন, তবে তাদের সবগুলি একটি অ্যানিমেশন দেখায় না।
যে ক্ষেত্রে একটি অ্যানিমেশন অক্ষম করা হয়, উপাদানগুলি স্থির থাকে এবং অ্যানিমেশনের শেষ মান দেখায়৷ এই কারণে, গুরুত্বপূর্ণ তথ্য দেখানোর জন্য অ্যানিমেশনের আচরণের উপর নির্ভর করবেন না, যেমন এর সময়কাল।