ਆਈਓਐਸ ਵਿੱਚ ਇੱਕ ਨਿਰਵਿਘਨ ਲੂਪਿੰਗ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

ਕਲਾਉਡਜ਼ ਨੂੰ ਹਮੇਸ਼ਾ ਲਈ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ: ਆਈਓਐਸ ਵਿੱਚ ਇੱਕ ਸਧਾਰਨ ਲੂਪਿੰਗ ਐਨੀਮੇਸ਼ਨ

ਆਈਓਐਸ ਵਿਕਾਸ ਵਿੱਚ, ਐਨੀਮੇਸ਼ਨ ਇੱਕ ਐਪ ਨੂੰ ਸੱਚਮੁੱਚ ਜੀਵਨ ਵਿੱਚ ਲਿਆ ਸਕਦੀ ਹੈ, ਇੱਕ ਗਤੀਸ਼ੀਲ ਅਤੇ ਆਕਰਸ਼ਕ ਤੱਤ ਸ਼ਾਮਲ ਕਰ ਸਕਦੀ ਹੈ ਜਿਸਨੂੰ ਉਪਭੋਗਤਾ ਪਸੰਦ ਕਰਦੇ ਹਨ। 🌥️ ਇੱਕ ਆਮ ਐਨੀਮੇਸ਼ਨ ਜੋ ਤੁਸੀਂ ਬਣਾਉਣਾ ਚਾਹ ਸਕਦੇ ਹੋ, ਇੱਕ ਨਿਰਵਿਘਨ, ਲੂਪਿੰਗ ਪ੍ਰਭਾਵ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਕਰੀਨ ਉੱਤੇ ਬੱਦਲਾਂ ਨੂੰ ਹਿਲਾਉਣਾ। ਇਹ ਸਧਾਰਨ ਪਰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਐਨੀਮੇਸ਼ਨ ਅਕਸਰ ਗੇਮਾਂ, ਮੌਸਮ ਐਪਾਂ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਨਿੱਜੀ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵੀ ਇੱਕ ਸ਼ਾਂਤ ਮਾਹੌਲ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ iOS ਵਿੱਚ ਐਨੀਮੇਸ਼ਨ ਲਈ ਨਵੇਂ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸ਼ਾਇਦ ਸੋਚ ਰਹੇ ਹੋਵੋਗੇ ਕਿ ਇਸਨੂੰ ਸਹਿਜ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ ਅਤੇ ਗਲਤੀਆਂ ਤੋਂ ਬਚਿਆ ਜਾਵੇ।

ਇੱਕ ਐਪ ਖੋਲ੍ਹਣ ਦੀ ਕਲਪਨਾ ਕਰੋ ਅਤੇ ਤੁਰੰਤ ਬੱਦਲਾਂ ਨੂੰ ਸਕਰੀਨ ਉੱਤੇ ਹੌਲੀ-ਹੌਲੀ ਘੁੰਮਦੇ ਹੋਏ, ਸੰਪੂਰਣ ਸ਼ਾਂਤ ਬੈਕਗ੍ਰਾਊਂਡ ਬਣਾਉਂਦੇ ਹੋਏ ਦੇਖੋ। ਸਵਿਫਟ ਵਿੱਚ `UIImageView` ਅਤੇ `UIView` ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਕਿਸਮ ਦਾ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਮੂਲ ਵਿਚਾਰ ਇੱਕੋ ਚਿੱਤਰ (ਇਸ ਕੇਸ ਵਿੱਚ ਬੱਦਲ) ਨੂੰ ਕਈ ਵਾਰ ਐਨੀਮੇਟ ਕਰਨਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਨਿਰੰਤਰ ਚਲਦਾ ਜਾਪਦਾ ਹੋਵੇ। ਹਾਲਾਂਕਿ, ਇਹ ਹਮੇਸ਼ਾ ਇੰਨਾ ਆਸਾਨ ਨਹੀਂ ਹੁੰਦਾ ਜਿੰਨਾ ਇਹ ਲੱਗਦਾ ਹੈ. ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਨਿਰਵਿਘਨ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਸਮੇਂ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਅਕਸਰ ਕੁਝ ਕਮੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਵਾਰ-ਵਾਰ ਚਿੱਤਰਾਂ ਨਾਲ ਨਜਿੱਠਣਾ ਹੁੰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਪ੍ਰਭਾਵ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਹੈ ਅਤੇ ਬੱਦਲਾਂ ਦੇ ਗਲਤ ਦਿਸ਼ਾ ਵੱਲ ਵਧਣ ਜਾਂ ਅਲੋਪ ਹੋ ਜਾਣ ਵਰਗੀਆਂ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ। ਇਹ ਆਮ ਸਮੱਸਿਆਵਾਂ ਹਨ ਜੋ ਗਲਤ ਫਰੇਮ ਹੈਂਡਲਿੰਗ ਜਾਂ ਐਨੀਮੇਸ਼ਨ ਕੌਂਫਿਗਰੇਸ਼ਨ ਤੋਂ ਪੈਦਾ ਹੁੰਦੀਆਂ ਹਨ। ਪਰ ਚਿੰਤਾ ਨਾ ਕਰੋ-ਇਹ ਗਾਈਡ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਮੁੱਦਿਆਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਕਦਮਾਂ 'ਤੇ ਲੈ ਕੇ ਜਾਵੇਗੀ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਐਨੀਮੇਸ਼ਨ ਨਿਰਵਿਘਨ ਕੰਮ ਕਰਦੀ ਹੈ। ਜਿਵੇਂ ਕਿ ਬੱਦਲਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਦੀ ਮੇਰੀ ਪਹਿਲੀ ਕੋਸ਼ਿਸ਼ ਦੀ ਤਰ੍ਹਾਂ, ਤੁਹਾਨੂੰ ਸੰਪੂਰਨ ਨਤੀਜਾ ਪ੍ਰਾਪਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਚੀਜ਼ਾਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। 😅

ਹੁਣ, ਆਉ ਉਹਨਾਂ ਬੱਦਲਾਂ ਨੂੰ ਇੱਕ ਸੰਪੂਰਨ ਲੂਪ ਵਿੱਚ ਜਾਣ ਲਈ ਹੱਲ ਵਿੱਚ ਡੁਬਕੀ ਮਾਰੀਏ। ਦੋ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਦੇ ਥੋੜੇ ਜਿਹੇ ਜਾਦੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਇੱਕ ਬੇਅੰਤ, ਤਰਲ ਮੋਸ਼ਨ ਬਣਾਓਗੇ ਜੋ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਨਿਰਵਿਘਨ ਅਤੇ ਪਾਲਿਸ਼ੀ ਦਿਖਾਈ ਦੇਵੇਗੀ। ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ ਅਤੇ ਉਹਨਾਂ ਬੱਦਲਾਂ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਵਹਿਣ ਲਈ ਤਿਆਰ ਹੋ? ਚਲਾਂ ਚਲਦੇ ਹਾਂ!

ਆਈਓਐਸ ਵਿੱਚ ਕਲਾਉਡ ਐਨੀਮੇਸ਼ਨ ਸਕ੍ਰਿਪਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ

ਉੱਪਰ ਦਿੱਤੀ ਗਈ ਸਕ੍ਰਿਪਟ ਉਦਾਹਰਨ ਵਿੱਚ, ਟੀਚਾ ਇੱਕ ਨਿਰਵਿਘਨ, ਨਿਰੰਤਰ ਕਲਾਉਡ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ ਹੈ ਜੋ ਇੱਕ iOS ਐਪ ਵਿੱਚ ਅਨੰਤ ਰੂਪ ਵਿੱਚ ਲੂਪ ਕਰਦਾ ਹੈ। ਮੁੱਖ ਵਿਚਾਰ ਦੋ ਐਨੀਮੇਟ ਕਰਨਾ ਹੈ UIImageView ਉਸੇ ਕਲਾਉਡ ਚਿੱਤਰ ਦੇ ਨਾਲ ਉਦਾਹਰਨਾਂ, ਉਹਨਾਂ ਨੂੰ ਸਕਰੀਨ ਵਿੱਚ ਖਿਤਿਜੀ ਰੂਪ ਵਿੱਚ ਹਿਲਾ ਕੇ। ਇਹ ਫਰੇਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਹਨਾਂ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਕੇ ਕੀਤਾ ਜਾਂਦਾ ਹੈ origin.x ਜਾਇਦਾਦ ਅਤੇ ਇਹਨਾਂ ਅਹੁਦਿਆਂ 'ਤੇ ਐਨੀਮੇਸ਼ਨ ਲਾਗੂ ਕਰਨਾ। ਦੋ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਜੋ ਜਦੋਂ ਇੱਕ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੂਜਾ ਇਸਦੀ ਜਗ੍ਹਾ ਲੈਣ ਲਈ ਤਿਆਰ ਹੁੰਦਾ ਹੈ, ਇੱਕ ਸਹਿਜ ਲੂਪ ਦਾ ਪ੍ਰਭਾਵ ਬਣਾਉਂਦਾ ਹੈ। ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਦੀ ਗਤੀ ਨੂੰ ਐਨੀਮੇਟ ਕਰਕੇ, ਤੁਸੀਂ ਇਹ ਭੁਲੇਖਾ ਦੇ ਸਕਦੇ ਹੋ ਕਿ ਬੱਦਲ ਲਗਾਤਾਰ ਅਸਮਾਨ ਵਿੱਚ ਵਹਿ ਰਹੇ ਹਨ। 🚀

ਆਉ ਕੋਡ ਦੇ ਮੁੱਖ ਭਾਗਾਂ ਨੂੰ ਤੋੜੀਏ। ਪਹਿਲਾ ਕਦਮ ਦੋ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ ਬਣਾਉਣਾ ਹੈ, ਹਰੇਕ ਵਿੱਚ ਬੱਦਲਾਂ ਦੀ ਇੱਕੋ ਜਿਹੀ ਤਸਵੀਰ ਹੈ। ਇਹ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ ਸਕਰੀਨ 'ਤੇ ਨਾਲ-ਨਾਲ ਰੱਖੇ ਗਏ ਹਨ, ਦੂਜਾ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜਿੱਥੇ ਪਹਿਲਾ ਖਤਮ ਹੁੰਦਾ ਹੈ, ਇੱਕ ਨਿਰੰਤਰ ਰੁਖ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਸੈੱਟਅੱਪ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਜਦੋਂ ਪਹਿਲਾ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ ਸਕ੍ਰੀਨ ਦੇ ਕਿਨਾਰੇ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ ਦੂਜਾ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ ਲੈਣ ਲਈ ਤਿਆਰ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਫਰੇਮ ਵਿਸ਼ੇਸ਼ਤਾ, ਜੋ ਕਿ ਮੂਲ ਦ੍ਰਿਸ਼ ਦੇ ਅੰਦਰ ਦ੍ਰਿਸ਼ਾਂ ਦੇ ਆਕਾਰ ਅਤੇ ਸਥਿਤੀ ਦੋਵਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ। ਹਰੇਕ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ ਇੱਕ ਵੱਖਰੀ x-ਸਥਿਤੀ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ: ਇੱਕ 0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਦੂਜਾ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।

ਇੱਕ ਵਾਰ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਅਗਲਾ ਕਦਮ ਉਹਨਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਾ ਹੈ। ਨਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ UIView.animate ਫੰਕਸ਼ਨ, ਜੋ ਸਮੇਂ ਦੇ ਨਾਲ ਵਿਚਾਰਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹੈ। ਦ UIView.animate ਫੰਕਸ਼ਨ ਕਈ ਪੈਰਾਮੀਟਰ ਲੈਂਦਾ ਹੈ: ਐਨੀਮੇਸ਼ਨ ਦੀ ਮਿਆਦ, ਐਨੀਮੇਸ਼ਨ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਕੋਈ ਦੇਰੀ, ਐਨੀਮੇਸ਼ਨ ਵਿਕਲਪ (ਜਿਵੇਂ ਕਿ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਦੁਹਰਾਉਣਾ), ਅਤੇ ਲਾਗੂ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਬਲਾਕ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਐਨੀਮੇਸ਼ਨ ਦੀ ਮਿਆਦ 20 ਸਕਿੰਟ 'ਤੇ ਸੈੱਟ ਕੀਤੀ ਗਈ ਹੈ, ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਹਮੇਸ਼ਾ ਲਈ ਦੁਹਰਾਉਣ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ .ਦੁਹਰਾਓ ਵਿਕਲਪ। ਦ .ਕਰਵਲੀਨੀਅਰ ਵਿਕਲਪ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਐਨੀਮੇਸ਼ਨ ਇੱਕ ਨਿਰੰਤਰ ਗਤੀ ਨਾਲ ਚੱਲਦੀ ਹੈ, ਇੱਕ ਨਿਰਵਿਘਨ, ਰੇਖਿਕ ਅੰਦੋਲਨ ਬਣਾਉਂਦੀ ਹੈ। ਚਿੱਤਰਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਔਫਸੈੱਟ ਕਰਕੇ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਮੂਵ ਕੀਤਾ ਜਾਂਦਾ ਹੈ origin.x ਸਕਰੀਨ ਦੀ ਚੌੜਾਈ ਦੁਆਰਾ.

ਹਾਲਾਂਕਿ, ਕੋਡ ਅਣਚਾਹੇ ਨਤੀਜੇ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਚਿੱਤਰ ਗਾਇਬ ਹੋ ਜਾਣਾ ਜਾਂ ਗਲਤ ਦਿਸ਼ਾ ਵੱਲ ਵਧਣਾ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਦ ਫਰੇਮ ਜਦੋਂ ਉਹ ਆਫ-ਸਕ੍ਰੀਨ ਚਲੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਚਿੱਤਰਾਂ ਨੂੰ ਰੀਸੈਟ ਕੀਤੇ ਬਿਨਾਂ ਸੰਪੱਤੀ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸੋਧਿਆ ਜਾ ਰਿਹਾ ਹੈ। ਇਸ ਦਾ ਹੱਲ ਇੱਕ ਢੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ ਰੀਸਾਈਕਲ ਕਲਾਉਡ, ਜੋ ਕਿ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈਟ ਕਰਦਾ ਹੈ ਜਦੋਂ ਉਹ ਸਕ੍ਰੀਨ ਦੀਆਂ ਸੀਮਾਵਾਂ ਤੋਂ ਅੱਗੇ ਵਧਦੇ ਹਨ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਚਿੱਤਰਾਂ ਨੂੰ ਗਾਇਬ ਕੀਤੇ ਬਿਨਾਂ, ਸਹਿਜੇ ਹੀ ਲੂਪ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਦੀ x-ਸਥਿਤੀ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ, ਅਤੇ ਜਦੋਂ ਕੋਈ ਆਫ-ਸਕ੍ਰੀਨ ਚਲਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਦੂਜੇ ਪਾਸੇ ਰੀਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਲੂਪ ਨੂੰ ਜਾਰੀ ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਵਰਤ ਕੇ ਕਮਜ਼ੋਰ ਸਵੈ ਕੰਪਲੀਸ਼ਨ ਬਲਾਕ ਦੇ ਅੰਦਰ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਐਪ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹੋਏ, ਮਜ਼ਬੂਤ ​​ਸੰਦਰਭ ਚੱਕਰਾਂ ਦੇ ਕਾਰਨ ਕੋਈ ਮੈਮੋਰੀ ਲੀਕ ਨਹੀਂ ਹੈ।

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: 20.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: nil)
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        let totalDuration = 20.0
        let animationOptions: UIView.AnimationOptions = [.repeat, .curveLinear]
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: animationOptions, animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }) { [weak self] _ in
            self?.recycleClouds()
        }
    }
    func recycleClouds() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    var totalDuration = 20.0
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: { [weak self] _ in
            self?.optimizeMemory()
        })
    }
    func optimizeMemory() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

ਆਈਓਐਸ ਵਿੱਚ ਸਹਿਜ ਕਲਾਉਡ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ

ਇੱਕ ਲੂਪਿੰਗ ਚਿੱਤਰ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ, ਜਿਵੇਂ ਕਿ ਇੱਕ iOS ਐਪ ਵਿੱਚ ਕਲਾਉਡ ਡ੍ਰਾਈਫਟ, ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵਾਂ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੋਵਾਂ 'ਤੇ ਧਿਆਨ ਨਾਲ ਵਿਚਾਰ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਸਕਰੀਨ 'ਤੇ ਘੁੰਮਦੇ ਬੱਦਲਾਂ ਦੇ ਇੱਕ ਬੇਅੰਤ ਲੂਪ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਸੰਬੋਧਿਤ ਕਰਨ ਲਈ ਕੁਝ ਮੁੱਖ ਤੱਤ ਹਨ: ਸਮਾਂ, ਦਿਸ਼ਾ, ਅਤੇ ਦ੍ਰਿਸ਼ਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਿਵੇਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਨਿਰਵਿਘਨ ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਕਾਰਕਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਚਿੱਤਰ ਦ੍ਰਿਸ਼ਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਭਾਲਣਾ ਤਾਂ ਜੋ ਉਹ ਸਿਰਫ਼ ਅਲੋਪ ਹੀ ਨਾ ਹੋਣ ਜਾਂ ਫਸ ਨਾ ਜਾਣ। ਦੋ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ UIImageView ਐਨੀਮੇਸ਼ਨ ਦੀਆਂ ਉਦਾਹਰਣਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ ਕਿ ਬੱਦਲ ਲਗਾਤਾਰ ਹਿੱਲਦੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, ਭਾਵੇਂ ਇੱਕ ਚਿੱਤਰ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਚਲਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਉਸਦੀ ਜਗ੍ਹਾ ਲੈ ਲੈਂਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਜਦੋਂ ਚਿੱਤਰ ਸਕ੍ਰੀਨ ਦੇ ਕਿਨਾਰੇ ਤੋਂ ਅੱਗੇ ਚਲੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਰੀਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਰੀਸੈਟ ਤੋਂ ਬਿਨਾਂ, ਐਨੀਮੇਸ਼ਨ ਟੁੱਟ ਸਕਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਬੱਦਲ ਗਾਇਬ ਹੋ ਸਕਦੇ ਹਨ ਜਾਂ ਲੂਪ ਵਿੱਚ ਅੰਤਰ ਛੱਡ ਸਕਦੇ ਹਨ।

ਐਨੀਮੇਸ਼ਨ ਦੇ ਇੱਕ ਹੋਰ ਨਾਜ਼ੁਕ ਪਹਿਲੂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ frame.origin.x ਵਿਸ਼ੇਸ਼ਤਾ, ਜੋ ਕਿ ਕਲਾਉਡ ਚਿੱਤਰਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਵੱਖ-ਵੱਖ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂਆਂ 'ਤੇ ਚਿੱਤਰਾਂ ਦੀ ਹਰੀਜੱਟਲ ਸਥਿਤੀ ਨੂੰ ਸੈਟ ਕਰਕੇ, ਤੁਸੀਂ ਅਨੰਤ ਅੰਦੋਲਨ ਦਾ ਭਰਮ ਬਣਾ ਸਕਦੇ ਹੋ। ਹਾਲਾਂਕਿ, ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਇੱਕ ਚਿੱਤਰ ਆਫ-ਸਕ੍ਰੀਨ ਚਲਦਾ ਹੈ ਅਤੇ ਸਹੀ ਸਥਿਤੀ 'ਤੇ ਰੀਸੈਟ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਸਹੀ ਪਹੁੰਚ ਇਹ ਪਤਾ ਲਗਾਉਣਾ ਹੈ ਕਿ ਚਿੱਤਰ ਕਦੋਂ ਸਕ੍ਰੀਨ ਦੇ ਕਿਨਾਰੇ ਤੋਂ ਲੰਘ ਗਿਆ ਹੈ, ਫਿਰ ਇਸਨੂੰ ਦੂਜੇ ਪਾਸੇ ਤੋਂ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਮੁੜ-ਸਥਾਪਿਤ ਕਰੋ। ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਇੱਕ ਦੁਹਰਾਉਣ ਵਾਲੇ ਅਤੇ ਨਿਰੰਤਰ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਇੱਕ ਨਿਰੰਤਰ ਪ੍ਰਵਾਹ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਅੰਦੋਲਨ ਨਿਰਵਿਘਨ ਹੈ, ਦੀ ਵਰਤੋਂ ਕਰੋ UIView.animate ਵਰਗੇ ਵਿਕਲਪਾਂ ਨਾਲ ਵਿਧੀ .ਦੁਹਰਾਓ ਲੂਪਿੰਗ ਲਈ ਅਤੇ .ਕਰਵਲੀਨੀਅਰ ਵੀ ਗਤੀ ਲਈ.

ਅੰਤ ਵਿੱਚ, ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਨਿਰਵਿਘਨਤਾ ਲਈ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਜਿੰਨਾ ਹੀ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਤੁਹਾਨੂੰ ਐਨੀਮੇਸ਼ਨ ਦੌਰਾਨ ਮੈਮੋਰੀ ਦੀ ਵਰਤੋਂ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਬੇਲੋੜੀਆਂ ਗਣਨਾਵਾਂ ਤੋਂ ਬਚਣਾ ਚਾਹੀਦਾ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ weak self ਕਲੋਜ਼ਰ-ਅਧਾਰਿਤ ਐਨੀਮੇਸ਼ਨਾਂ ਵਿੱਚ ਹਵਾਲੇ ਬਰਕਰਾਰ ਰੱਖਣ ਵਾਲੇ ਚੱਕਰਾਂ ਤੋਂ ਬਚ ਕੇ ਮੈਮੋਰੀ ਲੀਕ ਨੂੰ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੇ ਐਨੀਮੇਸ਼ਨ ਗੁੰਝਲਦਾਰ ਹੈ ਜਾਂ ਜੇ ਤੁਹਾਨੂੰ ਹੋਰ ਤਕਨੀਕੀ ਤਕਨੀਕਾਂ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਵਰਤਣ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ CADisplayLink ਰੀਅਲ-ਟਾਈਮ ਫ੍ਰੇਮ ਅੱਪਡੇਟ ਲਈ, ਜੋ ਐਨੀਮੇਸ਼ਨ ਦੇ ਸਮੇਂ ਅਤੇ ਨਿਰਵਿਘਨਤਾ 'ਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ। ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਅਤੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ 'ਤੇ ਐਨੀਮੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨਾ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਐਨੀਮੇਸ਼ਨ ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੀ ਹੈ। 📱