Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Not
Bu kitap 2016 baharında yayımlanmıştır ve o zamandan beri güncellenmemiştir. Kitapta değerli kalan çok şey vardır, ancak bazı malzemeler eskidir ve bazı konular artık tamamen doğru veya eksiksiz değildir.
zamanlayıcısını veya Task.Delaykullanarak kendi animasyonlarınızı oluşturabileceğinizi Xamarin.Forms gördünüz, ancak tarafından Xamarin.Formssağlanan animasyon olanaklarını kullanmak genellikle daha kolaydır. Üç sınıf bu animasyonları uygular:
ViewExtensions, üst düzey yaklaşımAnimation, daha çok yönlü ama daha zorAnimationExtension, en çok yönlü, en düşük düzeyli yaklaşım
Animasyonlar genellikle bağlanabilir özellikler tarafından desteklenen özellikleri hedefler. Bu bir gereksinim değildir, ancak değişikliklere dinamik olarak tepki veren tek özellikler bunlardır.
Bu animasyonlar için XAML arabirimi yoktur, ancak Bölüm 23'te açıklanan teknikleri kullanarak animasyonları XAML ile tümleştirebilirsiniz. Tetikleyiciler ve Davranışlar.
Temel animasyonları keşfetme
Temel animasyon işlevleri, sınıfında bulunan ViewExtensions uzantı yöntemleridir. Bu yöntemler, öğesinden VisualElementtüretilen tüm nesnelere uygulanır. En basit animasyonlar, içinde Chapter 21. Transformsaçıklanan dönüştürme özelliklerini hedefler.
AnimationTryout, bir Button için olay işleyicisinin Clicked düğmeyi daire içinde döndürmek için uzantı yöntemini nasıl çağırabileceğini RotateTo gösterir.
yöntemi, RotateTo bir çeyrek saniye boyunca (varsayılan olarak) 0 olan özelliğini Button 360 olarak değiştirirRotation. Button Ancak , yeniden dokunulduğunda özelliği zaten 360 derece olduğundan Rotation hiçbir şey yapmaz.
Animasyon süresini ayarlama
için ikinci bağımsız değişken RotateTo milisaniye cinsinden bir süredir. Büyük bir değere ayarlanırsa, animasyon sırasında öğesine Button dokunulduğunda geçerli açıdan başlayan yeni bir animasyon başlatılır.
Göreli animasyonlar
yöntemi, RelRotateTo var olan değere belirtilen değeri ekleyerek göreli döndürme gerçekleştirir. Bu yöntem, öğesinin Button birden çok kez eşlenmesine olanak tanır ve her seferinde özelliği 360 derece artırır Rotation .
Animasyonlar bekleniyor
Döndürülen Task<bool> nesnelerdeki ViewExtensions tüm animasyon yöntemleri. Bu, veya awaitkullanarak ContinueWith bir dizi sıralı animasyon tanımlayabileceğiniz anlamına gelir. Tamamlama bool dönüş değeri, false animasyon kesinti olmadan tamamlandıysa veya true yöntemi tarafından CancelAnimation iptal edildiyse ve bu değer aynı öğede ayarlanan diğer yöntem ViewExtensions tarafından başlatılan tüm animasyonları iptal eder.
Bileşik animasyonlar
Bileşik animasyonlar oluşturmak için beklenen ve beklemeyen animasyonları karıştırabilirsiniz. , ve Scale dönüştürme özelliklerini hedefleyen TranslationYTranslationXanimasyonlar ViewExtensions şunlardır:
TranslateTo hem hem TranslationY de özelliklerini etkileyebileceğine TranslationX dikkat edin.
Task.WhenAll ve Task.WhenAny
Birden çok görev sona erdiğinde sinyal veren ve Task.WhenAnybirkaç görevden ilki sona erdiğinde sinyal veren ile eşzamanlı animasyonları Task.WhenAllyönetmek de mümkündür.
Döndürme ve tutturucular
, , RelScaleTove yöntemlerini çağırırken ScaleTove özelliklerini ölçeklendirme ve döndürmenin merkezini gösterecek şekilde ayarlayabilirsiniz AnchorX AnchorY.RelRotateTo RotateTo
CircleButton, sayfanın ortasında bir Button döndürerek bu tekniği gösterir.
Kolaylaştırma işlevleri
Animasyonlar genellikle bir başlangıç değerinden bitiş değerine kadar doğrusaldır. Kolaylaştırma işlevleri, animasyonların rotalarını hızlandırmasına veya yavaşlamasına neden olabilir. Animasyon yöntemlerinin isteğe bağlı son bağımsız değişkeni, türünde Easing11 statik salt okunur alanı tanımlayan bir sınıf türüdür Easing:
Linear, varsayılanSinIn,SinOutveSinInOutCubicIn,CubicOutveCubicInOutBounceInveBounceOutSpringInveSpringOut
Sonek In , efektin animasyonun Out başında, sonunda ve InOut animasyonun başında ve sonunda olduğu anlamına gelir.
BounceButton örneği, kolaylaştırma işlevlerinin kullanımını gösterir.
Kendi kolaylaştırma işlevleriniz
Oluşturucuya bir Func<double, double> geçirerek kendi kolaylaştırma işlevlerinizi Easingde tanımlayabilirsiniz. Easing ayrıca öğesinden Func<double, double> öğesine Easingörtük bir dönüştürme tanımlar. Animasyon baştan sona doğrusal olarak ilerlerken kolaylaştırma işlevinin bağımsız değişkeni her zaman 0 ile 1 arasında olur. İşlev genellikle 0 ile 1 arasında bir değer döndürür, ancak kısa bir süre negatif veya 1'den büyük olabilir (ve SpringOut işlevlerinde SpringIn olduğu gibi) veya ne yaptığınızı biliyorsanız kuralları bozabilir.
UneasyScale örneği özel bir kolaylaştırma işlevi, CustomCubicEase ise başka bir işlev gösterir.
SwingButton örneği ayrıca özel bir kolaylaştırma işlevini ve ayrıca döndürme animasyonları dizisi içinde ve AnchorY özelliklerini değiştirme AnchorX tekniğini gösterir.
Book.Toolkit kitaplığı, tıklandığında düğmeyi oynatmak için özel bir kolaylaştırma işlevi kullanan bir sınıfa sahiptirJiggleButton.Xamarin.Forms JiggleButtonDemo örneği bunu gösterir.
Giriş animasyonları
Popüler animasyon türlerinden biri, bir sayfa ilk kez görüntülendiğinde gerçekleşir. Böyle bir animasyon, sayfanın geçersiz kılınmasıyla başlatılabilir OnAppearing . Bu animasyonlar için, XAML'yi sayfanın animasyondan sonra nasıl görünmesini istediğinize göre ayarlamak ve ardından koddan düzeni başlatıp animasyona eklemek en iyisidir.
FadingEntrance örneği, sayfanın içeriğinin soluk olması için uzantı yöntemini kullanırFadeTo.
SlidingEntrance örneği, yanlardan sayfanın içeriğini kaydırmak için uzantı yöntemini kullanırTranslateTo.
SwingingEntrance örneği, özelliğine RotateYTo animasyon RotationY eklemek için uzantı yöntemini kullanır. Bir RotateXTo yöntem de kullanılabilir.
Sonsuza kadar animasyonlar
Diğer uçta ise program sonlandırılana kadar "sonsuza kadar" animasyonlar çalıştırılır. Bunlar genellikle tanıtım amaçlıdır.
FadingTextAnimation örneği, iki metin parçasını içeri ve dışarı soldurmak için animasyon kullanırFadeTo.
PalindromeAnimation bir palindrom görüntüler ve sonra tek tek harfleri sıralı olarak 180 derece döndürerek baş aşağı gitmelerini sağlar. Ardından, özgün dizeyle aynı okunması için tüm dize 180 derece çevrildi.
CopterAnimation örneği, basit BoxView bir helikopteri ekranın ortasında döndürür.
RotateingSpokes , ekranın ortasındaki uçları döndürür BoxView ve ardından ilginç desenler oluşturmak için her bir uçta döndürüyor:
Ancak, RotationBreakdown örneğinde Rotation gösterildiği gibi bir öğenin özelliğini aşamalı olarak artırmak uzun vadede çalışmayabilir.
SpinningImage örneği, bit eşlem 3B alanda dönüyormuş gibi görünmesini sağlamak için , RotateXTove RotateYTo kullanırRotateTo.
Bounds özelliğinin animasyonunu oluşturma
içinde henüz gösterilmeyen tek uzantı yöntemiViewExtensions, yöntemini çağırarak Layout salt Bounds okunur özelliğe etkili bir şekilde animasyon uygulayan yöntemidirLayoutTo. Bu yöntem normalde 26. Bölümde ele alınacağı gibi türevler tarafından Layout çağrılır. CustomLayouts.
Yöntemin LayoutTo özel amaçlarla kısıtlanması gerekir. BouncingBox programı, sayfanın kenarlarından geri dönen bir BoxView öğesini sıkıştırmak ve genişletmek için bunu kullanır.
XamagonXuzzle örneği, numaralandırılmış kutucuklar yerine karışık bir görüntü görüntüleyen klasik 15-16 bulmaca uygulamasındaki kutucukları taşımak için kullanırLayoutTo:
Kendi beklenebilir animasyonlarınız
TryAwaitableAnimation örneği, beklenebilir bir animasyon oluşturur. Yönteminden bir Task nesne döndürebilen kritik sınıf ve animasyon tamamlandığında sinyaldir TaskCompletionSource.
Animasyonların daha derinine in
Animasyon Xamarin.Forms sistemi biraz kafa karıştırıcı olabilir. Sınıfına Easing ek olarak, animasyon sistemi , Animationve AnimationExtension sınıflarından ViewExtensionsoluşur.
ViewExtensions sınıfı
'ı zaten gördünüz ViewExtensions. ve CancelAnimationsdöndüren Task<bool> dokuz yöntemi tanımlar. Dokuz yöntemin yedisi dönüştürme özelliklerini hedefler. Diğer ikisi, özelliğini hedefleyen ve yöntemini çağıran ikisidirFadeToLayout.LayoutToOpacity
Animasyon sınıfı
sınıfı, Animation geri çağırmayı ve tamamlanmış yöntemleri ve animasyon parametrelerini tanımlamak için beş bağımsız değişkeni olan bir oluşturucuya sahiptir.
Alt animasyonlar , , InsertWithConcurrentve aşırı yüklemesiyle AddWithConcurrenteklenebilir.
Animasyon nesnesi daha sonra yöntemine Commit yapılan bir çağrıyla başlatılır.
AnimationExtensions sınıfı
sınıfı AnimationExtensions çoğunlukla uzantı yöntemleri içerir. Bir Animate yöntemin birkaç sürümü vardır ve genel Animate yöntem o kadar çok yönlüdür ki ihtiyacınız olan tek animasyon işlevidir.
Animasyon sınıfıyla çalışma
ConcurrentAnimations örneği, sınıfı birkaç Animation farklı animasyonla gösterir.
Alt animasyonlar
ConcurrentAnimations örneği, (çok benzer) Add ve Insert yöntemlerden yararlanan alt animasyonları da gösterir.
Üst düzey animasyon yöntemlerinin ötesinde
ConcurrentAnimations örneği, yöntemler tarafından ViewExtensions hedeflenen özelliklerin ötesine giden animasyonların nasıl gerçekleştirildiğini de gösterir. Bir örnekte, bir dizi nokta daha uzun olur; başka bir BackgroundColor örnekte bir özellik animasyonludur.
Kendi beklenebilir yöntemlerinizden daha fazlası
TranslateTo yöntemi ViewExtensions işleviyle Easing.SpringOut çalışmaz. Kolaylaştırma çıkışı 1'in üzerine çıktığında durur.
Book.Toolkit kitaplığı, bu soruna sahip olmayan ve TranslateYTo uzantı yöntemlerine TranslateXTo sahip bir MoreViewExtensions sınıfın yanı CancelTranslateXTo sıra bu animasyonları iptal etme yöntemlerini içerirCancelTranslateYTo.Xamarin.Forms
SpringSlidingEntrance yöntemini gösterirTranslateXTo.
MoreExtensions sınıfı ayrıca X ve Y çevirisini birleştiren bir TranslateXYTo uzantı yöntemi ve bir CancelTranslateXYTo yöntem içerir.
Bezier animasyonu uygulama
Bir öğeyi Bezier spline yolu boyunca taşıyan bir animasyon geliştirmek de mümkündür. Book.Toolkit kitaplığı, Bezier spline'ı ve yönlendirmeyi denetlemek için bir numaralandırmayı kapsülleyen bir BezierTangent yapı içerirBezierSpline.Xamarin.Forms
sınıfı MoreViewExtensions bir BezierPathTo uzantı yöntemi ve bir CancelBezierPathTo yöntem içerir.
BezierLoop örneği, Beizer yolu boyunca bir öğenin animasyonunu göstermeyi gösterir.
AnimationExtensions ile Çalışma
Standart koleksiyonda eksik olan animasyon türlerinden biri renk animasyonudur. Sorun, iki Color değer arasında ilişkilendirmenin doğru bir yolu olmamasıdır. Tek tek RGB değerlerini ilişkilendirmek mümkündür, ancak geçerli olduğu gibi HSL değerlerini ilişkilendirmek de mümkündür.
Bu nedenle, MoreViewExtensions Book.Toolkit kitaplığındakiXamarin.Forms sınıfı iki Color animasyon yöntemi içerir: RgbColorAnimation ve .HslColorAnimation (ayrıca iki iptal yöntemi vardır: CancelRgbColorAnimation ve CancelHslColorAnimation).
Her iki yöntem de içinde kapsamlı genel Animate yöntemini AnimationExtensionsçağırarak animasyonu gerçekleştiren öğesini kullanırColorAnimation.
ColorAnimations örneği, bu iki tür renk animasyonunun kullanılmasını gösterir.
Animasyonlarınızı yapılandırma
Bazen XAML'de animasyonları ifade etmek ve bunları MVVM ile birlikte kullanmak yararlı olabilir. Bu, sonraki bölüm olan 23. bölümde ele alınmıştır. Tetikleyiciler ve Davranışlar.