Swift Academy · درس

التحويلات والتأثيرات ثلاثية الأبعاد

طبّق التحويلات الأفينية والثلاثية الأبعاد.

التحويلات والتأثيرات ثلاثية الأبعاد درس مجاني في Swift Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Swift Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Swift Academy 4 دروس في المجموع.

التحويلات تحرّك الطبقات وتشوهها

يعيد التحويل تشكيل الطبقة، مثل إزاحتها أو تغيير مقياسها أو تدويرها أو إمالتها، من دون تغيير حدودها. ويدعم Core Animation التحويلات الثنائية الأبعاد باستخدام CGAffineTransform والتحويلات الثلاثية الأبعاد باستخدام CATransform3D.

التحويلات الأفينية الثنائية الأبعاد

يتعامل CGAffineTransform مع التحويلات المستوية. ويمكنكم دمجها عبر التسلسل، مع الانتباه إلى أن الترتيب مهم.

import UIKit
var t = CGAffineTransform.identity
t = t.scaledBy(x: 1.5, y: 1.5)
t = t.rotated(by: .pi / 6)
layer.setAffineTransform(t)

CATransform3D

يمثل CATransform3D مصفوفة 4x4 تتيح التحويل الثلاثي الأبعاد الحقيقي. ابدأوا من CATransform3DIdentity، ثم طبّقوا الإزاحة وتغيير المقياس والدوران في الفضاء.

var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t

الدوران الثلاثي الأبعاد

دوّروا حول أي محور باستخدام CATransform3DRotate(t, angle, x, y, z). يؤدي الدوران حول المحور y إلى قلب البطاقة، بينما يؤدي الدوران حول x إلى إمالتها إلى الأمام.

let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
    CATransform3DIdentity, angle, 0, 1, 0) // around y

المنظور

يبدو الدوران الثلاثي الأبعاد مسطحًا من دون منظور. اضبطوا العنصر m34 في مصفوفة الهوية على قيمة سالبة صغيرة، نحو -1/500، لإضافة العمق.

var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)

كيف ينشئ m34 العمق

يقسم الحد m34 المحورين x وy على العمق، لذلك تتقلص النقاط الأبعد. وتعطي القيم المطلقة الأصغر، أي المقام الأكبر، منظورًا خفيفًا، بينما تبالغ القيم الأكبر فيه.

// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0

نقطة الارتكاز والتحويلات

تدور التحويلات حول anchorPoint. ولتدوير بطاقة حول حافتها اليسرى، اضبطوا anchorPoint أولًا على (0, 0.5).

layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
    CATransform3DIdentity, .pi / 3, 0, 1, 0)

تحريك التحويلات

يمكن تحريك التحويل بأكمله. حرّكوا مسار المفتاح transform، أو مفاتيح فرعية مثل transform.rotation.y لمحور واحد.

let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")

تحويلات الطبقات الفرعية

عيّن sublayerTransform على طبقة أب لتطبيق المنظور على جميع الطبقات التابعة لها دفعة واحدة، وهو أمر مفيد للحاويات ثلاثية الأبعاد وواجهات العرض الدوّارة.

var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = t

zPosition وفرز العمق

يتحكم zPosition في ترتيب الرسم داخل الفضاء ثلاثي الأبعاد. تُرسَم القيم الأعلى في المقدمة. ادمجه مع الدوران لإنشاء مشاهد ثلاثية الأبعاد متراكبة ومتداخلة.

frontCard.zPosition = 10
backCard.zPosition = 0

دمج التحويلات

سلسِل التحويلات لتركيب التأثيرات. تذكّر أن ضرب المصفوفات غير تبادلي، فالتدوير ثم التحجيم يختلف عن التحجيم ثم التدوير.

var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)

تحقق سريع: التحويلات

اختبر مدى فهمك للتحويلات ثلاثية الأبعاد.

مراجعة: التحويلات والتأثيرات ثلاثية الأبعاد

تعيد التحويلات تشكيل الطبقات من دون تغيير حدودها: استخدم CGAffineTransform للتحويلات ثنائية الأبعاد، وCATransform3D للتحويلات ثلاثية الأبعاد الحقيقية. أضف العمق بتعيين m34 (نحو -1/500)، وحدد نقطة الارتكاز عبر anchorPoint، وطبّق منظور الحاوية باستخدام sublayerTransform.

حرّك التحويلات ككل أو على مستوى كل محور، وفرز العمق باستخدام zPosition، وتذكّر أن ترتيب تركيب التحويلات مهم.

الأسئلة الشائعة

هل درس «التحويلات والتأثيرات ثلاثية الأبعاد» مجاني؟

نعم — نص درس «التحويلات والتأثيرات ثلاثية الأبعاد» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Swift Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Swift Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحويلات والتأثيرات ثلاثية الأبعاد»؟

طبّق التحويلات الأفينية والثلاثية الأبعاد. تتمرن على Swift Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Swift Academy؟

لا تُشترط خبرة سابقة. Swift Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «التحويلات والتأثيرات ثلاثية الأبعاد»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Swift Academy هذا؟

نعم. كل درس في Swift Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Swift Academy