Hareket yolları hakkında

Hareket yolları, eğriler ve karmaşık şekillerle birlikte hareket eden nesneleri canlandırmanızı sağlar. Kalem aracıyla çizilen çizgilere benzer şekilde, hareket yollarını sabitleme noktaları ayarlayarak tanımlarsınız. Daha sonra, bu sabitleme noktaları düz veya eğri çizgilerle birbirine bağlanır.

Hareket yolu animasyonu, CSS tarafından yaklaştırıldığından animasyonlu öğeler kendi hareket yollarını tam olarak izleyemez. Genel olarak farklılık dikkat çekecek boyutta olmamalıdır (varsayılan değer bir pikselden daha küçüktür) ve hareket yolu özelliklerinde, sapmanın kapsamını sınırlandırabilirsiniz.

Hareket yolları hakkında

Bu sayfada:

• Hareket yollarını görüntüleme
  • Sabitleme noktaları
  • Kontrol noktaları
• Hareket yollarını düzenleme
  • Hareket yolu şeklini düzenleme
  • Hareket yollarını dönüştürme
  • Animasyon hızını düzenleme
• Optimizasyon
• Hareket yolu özellikleri
• Sınırlamalar

Hareket yollarını görüntüleme

Tek bir öğenin veya grubun animasyon sırasında nereye hareket edeceğini sabitleme noktalarıyla birlikte gösteren çizgileri görmek için bir öğe veya grup seçin.

Aynı anda yalnızca bir hareket yolunu görüntüleyebilirsiniz.

Sabitleme noktaları

Sabitleme noktaları, iki şekilde ayarlanır:

• Öğe için yeni bir x veya y konumu belirten küçük resimler ya da animasyon kareleri, sabitleme noktalarını otomatik olarak oluşturur. Başlangıç ve bitiş sabitleme noktaları her zaman animasyon karelerinde yer alır.
• Hareket yolu aracını kullanarak hareket yolu boyunca sabitleme noktaları ekleyebilirsiniz.

Kontrol noktaları

Kontrol noktaları, Hareket yolu aracı seçildiğinde görünür. Sabitleme noktalarının arasındaki her segmentin iki kontrol noktası olur. Her sabitleme noktasına bir kontrol noktası bağlıdır. Bir kontrol noktasının uzunluğu ve yönü, hareket yolunun eğrilik derecesini belirtir. Düz çizgiler için kontrol noktaları segmente yaslanmış veya daraltılmış olur.

Hareket yollarını düzenleme

Hareket yolu şeklini düzenleme

Hareket yolları basit eğriler, kapalı şekiller (çokgen ve daire gibi) veya diğer nesnelerin ayrıntılı dış çizgileri olabilir. Bir hareket yolunun şeklini değiştirmek için:

Sabitleme noktası ekleme

• Öğenin konumunu değiştiren bir küçük resim veya animasyon karesi ekleyin. Bu işlem bir sabitleme noktası ekler ve bu sabitleme noktasından yumuşak geçişi değiştirebilirsiniz.
• Hareket yolu aracının Sabitleme noktası ekle seçeneği ile hareket yolu üzerinde bir yere sabitleme noktası ekleyerek hareket noktasını orada sabitleyebilirsiniz. Bu yöntem kullanılarak sabitleme noktası eklendiğinde küçük resim veya animasyon karesi eklenmez.

Eğriliği ayarlama

• Hareket yolunun şeklini değiştirmek için Seçim aracını veya Hareket yolu aracının varsayılan seçeneğini kullanarak sabitleme noktaları dahil olmak üzere hareket yolunun üzerindeki herhangi bir noktayı sürükleyebilirsiniz.
• Hareket yolu aracı seçildiğinde, hareket yolunun eğriliğini etkileyen uzunluğu ve açıyı değiştirmek için kontrol noktalarını sürükleyin. Başka bir kontrol noktası aynı sabitleme noktasına eklendiğinde, Alt tuşunu basılı tutmuyorsanız diğer kontrol noktası otomatik olarak açısını uygun şekilde ayarlar.
• Eklenen kontrol noktalarını daraltmak için sabitleme noktasını çift tıklayın. Sabitleme noktasını tekrar çift tıkladığınızda kontrol noktaları genişler.

  Bir hareket yolunu düzeltmek için her iki sabitleme noktasını da çift tıklayın.

Sabitleme noktasını silme

• Hareket yolu aracının Sabitleme noktasını sil seçeneği ile mevcut bir sabitleme noktasını tıklayarak kaldırabilirsiniz. Hareket yolu dışında herhangi bir animasyonlu özelliği olmayan bir küçük resme veya animasyon karesine karşılık gelen bir sabitleme noktası silindiğinde, küçük resim ya da animasyon karesi de silinir.
• Bir küçük resim veya animasyon karesi silindiğinde, hareket yolunun o küçük resimde ya da animasyon karesinde sona eren segmenti de silinir.

Hareket yollarını dönüştürme

Hareket yolu aracını seçip araç seçenekleri çubuğundaki Dönüştürme kontrolü kutusunu işaretleyerek hareket yollarını taşıyabilir, yeniden boyutlandırabilir, çevirebilir veya döndürebilirsiniz. Bu seçenek etkinleştirildiğinde, hareket yolu olan bir öğeyi seçerseniz dönüştürme kontrolleri görüntülenir.

Hareket yolunu taşıma

Hareket yolunu sahnede yeni bir konuma sürükleyin.

Hareket yolunu yeniden boyutlandırma

• Yeniden boyutlandırma kutusu, hareket yolunu her köşede ve her kenardaki tutma yerlerinin olduğu mavi çerçeveyle gösterir. Hareket yolunun boyutunu değiştirmek için bir tutma yerini sürükleyin.
• Orijinal en boy oranını korumak için sürükleme sırasında Üst Karakter tuşunu basılı tutun.
• Hareket yolunu aynı noktada ortalamak için sürüklerken Alt tuşunu basılı tutun.
• Hareket yolunu farklı bir yönde yeniden boyutlandırmak için araç seçenekleri çubuğundaki alana dönüş derecelerini girerek yeniden boyutlandırma kutusunu döndürün. Ayrıca Alt (Windows) veya Option (Mac) tuşu basılıyken sol veya sağ ok tuşlarına basarak yeniden boyutlandırma kutusunu 5° döndürebilirsiniz. Alandaki değer her zaman 0°'ye sıfırlandığı için, mevcut yöne göre hedeflenen döndürme değerini girmeniz gerekir. Yeniden boyutlandırma kutusunu döndürmek, hareket yolunun kendisinin yönünü değiştirmez.
• Yeniden boyutlandırma kutusunun yönünü sıfırlamak için iç döndürme kontrolünü (küçük halka) çift tıklayın. Böylece, döndürme pivot noktası konumu da sıfırlanır.

Hareket yolunu çevirme

• Bir yeniden boyutlandırma tutma yerini karşıt yeniden boyutlandırma tutma yeri üzerine sürükleyin.

Hareket yolunu döndürme

• Hareket yolunu döndürmek için dış döndürme kontrolünü (büyük halka) saat yönünde veya saat yönünün tersine sürükleyin.
• Döndürmeyi 45°'lik artımlarla sınırlandırmak için, nesneyi sürüklerken Üst Karakter tuşunu basılı tutun.
• Pivot noktasını döndürmek üzere hareket ettirmek için iç döndürme kontrolünü (daha küçük halka) farklı bir yere sürükleyin. İç döndürme kontrolünü çift tıklayarak pivot noktası konumunu sıfırlayın (bu işlem aynı zamanda yeniden boyutlandırma kutusu yönünü de sıfırlar).

Hareket yolu düzenleme

Animasyon hızını düzenleme

Küçük resimlerin veya animasyon karelerinin zamanlamasını ve bunların arasındaki yumuşak geçişi değiştirerek hareket yolunun üzerindeki bir nesnenin hızını kontrol edebilirsiniz. Ayrıca, hareket yolu animasyonu döngüsü de oluşturabilirsiniz.

Hareket yolu aracıyla eklenen sabitleme noktaları animasyon hızını etkilemez. Bunun yerine, bir küçük resim veya animasyon karesi ekleyin.

Optimizasyon

Bir hareket yolunu oluştururken veya düzenlerken Google Web Designer, animasyonu otomatik olarak optimize eder. Böylece, hareket yolu özelliklerinde belirttiğiniz toleranslara gözlemlerken animasyonu oluşturmak için kullanılan CSS miktarını da azaltır. Toleranslar ne kadar düşük olursa, animasyon da animasyon yolunu o kadar yakından izler ancak daha az optimizasyon mümkün olur.

Daha fazla sıkıştırma için hareket yolu özelliklerinde Eğriyi optimize et'i tıklayın. Bu işlem, otomatik optimizasyondan daha uzun sürebilir.

Google Web Designer, seçilen öğenin tahmini hareket yolu boyutunu Özellikler panelinde görüntüler. Bu bilgi, doküman yayınlandıktan sonra hareket yolunun ne kadarlık bir disk alanını kaplayacağını ifade eder.

Hareket yolu özellikleri

Hareket yolu özellikleri, Hareket yolu aracıyla bir sabitleme noktası eklemenizden veya hareket yolunu eğri olacak şekilde düzenlemenizden sonra Özellikler panelinde görünür.

Özellik	Açıklama
Yönü yola göre ayarla	Etkinleştirildiğinde, öğe animasyon sırasında hareket yolunun yönüne bakacak şekilde döner (ör. bir hareket yolunun aşağı doğru eğrisini izlerken öğe aşağı doğru yatar). Dönüşün hassasiyetini Açı toleransı özelliğiyle kontrol edin.
Konum toleransı	Öğenin hareket yolundan ne kadar sapabileceğini ayarlar. Varsayılan: 0,5 piksel Minimum: 0,1 piksel Maksimum: 100 piksel
Açı toleransı	Öğenin yönünün, hareket yolunun yönünden ne kadar farklı olabileceğini kontrol eder. Yalnızca Yönü yola göre ayarla seçeneği etkinse geçerlidir. Varsayılan: 1° Minimum: 1° Maksimum: 360°
Eğriyi optimize et	Hareket yolu animasyonunu oluşturmak amacıyla kullanılan CSS'nin boyutunu küçültmek için düğmesini tıklayın. Optimizasyon sonrasında, hareket yolu değişinceye kadar düğme devre dışı bırakılır.
Boyut tahmini:	Hareket yolunun tahmini boyutunu görüntüler. Ek sıkıştırma için Eğriyi optimize et düğmesini kullanın.

Sınırlamalar

• Yukarı/sol konumlandırma: Hareket yolları yukarı/sol konumlandırmayı desteklemez. Bunun yerine CSS dönüştürme özelliğini kullanın (bu, varsayılan değerdir).
• 3D animasyon: Google Web Designer, 3D hareket yollarını desteklemez. Öğeye ayrı olarak 3D hareket ettirme uygulayabilirsiniz.
• CSS paneli: CSS paneli, hareket yollarını etkilemez ancak stiller öğenin kendisine uygulanmaya devam eder.
• Kod görünümü: Kod görünümünde hareket yollarını görüntüleyemez veya düzenleyemezsiniz.
• Resim reklamlar: Hareket yolu aracı resim reklamlarda kullanılamaz.