ਇਸਦੀ ਤਸਵੀਰ ਬਣਾਓ: ਤੁਸੀਂ ਇੱਕ ਨਵੇਂ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹੋ, ਕੋਡਬੇਸ ਵਿੱਚ ਡੁਬਕੀ ਲਗਾਉਂਦੇ ਹੋ, ਅਤੇ ਪਹਿਲੇ ਕੁਝ ਘੰਟਿਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਨਿਰਾਸ਼ਾਜਨਕ ਤੌਰ 'ਤੇ ਜਾਣੂ ਕੁਝ ਪਤਾ ਲੱਗਦਾ ਹੈ। ਸਟਾਈਲਸ਼ੀਟਾਂ ਵਿੱਚ ਖਿੰਡੇ ਹੋਏ, ਤੁਹਾਨੂੰ ਇੱਕੋ ਜਿਹੇ ਮੂਲ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਕਈ @keyframes ਪਰਿਭਾਸ਼ਾਵਾਂ ਮਿਲਦੀਆਂ ਹਨ। ਤਿੰਨ ਵੱਖ-ਵੱਖ ਫੇਡ-ਇਨ ਪ੍ਰਭਾਵ, ਦੋ ਜਾਂ ਤਿੰਨ ਸਲਾਈਡ ਭਿੰਨਤਾਵਾਂ, ਮੁੱਠੀ ਭਰ ਜ਼ੂਮ ਐਨੀਮੇਸ਼ਨ, ਅਤੇ ਘੱਟੋ-ਘੱਟ ਦੋ ਵੱਖ-ਵੱਖ ਸਪਿਨ ਐਨੀਮੇਸ਼ਨ ਕਿਉਂਕਿ, ਠੀਕ ਹੈ, ਕਿਉਂ ਨਹੀਂ? @keyframes ਪਲਸ { ਤੋਂ { ਸਕੇਲ: 1; } ਨੂੰ { ਸਕੇਲ: 1.1; } }
@keyframes ਵੱਡੀ-ਨਬਜ਼ { 0%, 20%, 100% { ਸਕੇਲ: 1; } 10%, 40% { ਸਕੇਲ: 1.2; } }
ਜੇ ਇਹ ਦ੍ਰਿਸ਼ ਜਾਣੂ ਲੱਗਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ। ਵੱਖ-ਵੱਖ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਮੇਰੇ ਤਜ਼ਰਬੇ ਵਿੱਚ, ਸਭ ਤੋਂ ਲਗਾਤਾਰ ਤੇਜ਼ ਜਿੱਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਜੋ ਮੈਂ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦਾ ਹਾਂ ਉਹ ਹੈ ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰਨਾ ਅਤੇ ਮਾਨਕੀਕਰਨ ਕਰਨਾ। ਇਹ ਇੰਨਾ ਭਰੋਸੇਮੰਦ ਪੈਟਰਨ ਬਣ ਗਿਆ ਹੈ ਕਿ ਮੈਂ ਹੁਣ ਕਿਸੇ ਵੀ ਨਵੇਂ ਕੋਡਬੇਸ 'ਤੇ ਆਪਣੇ ਪਹਿਲੇ ਕਾਰਜਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੇ ਰੂਪ ਵਿੱਚ ਇਸ ਸਫਾਈ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹਾਂ। ਹਫੜਾ-ਦਫੜੀ ਦੇ ਪਿੱਛੇ ਤਰਕ ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਸੋਚਦੇ ਹੋ ਤਾਂ ਇਹ ਰਿਡੰਡੈਂਸੀ ਸਹੀ ਅਰਥ ਰੱਖਦੀ ਹੈ। ਅਸੀਂ ਸਾਰੇ ਆਪਣੇ ਰੋਜ਼ਾਨਾ ਦੇ ਕੰਮ ਵਿੱਚ ਇੱਕੋ ਜਿਹੇ ਬੁਨਿਆਦੀ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ: ਫੇਡ, ਸਲਾਈਡ, ਜ਼ੂਮ, ਸਪਿਨ ਅਤੇ ਹੋਰ ਆਮ ਪ੍ਰਭਾਵ। ਇਹ ਐਨੀਮੇਸ਼ਨ ਬਹੁਤ ਹੀ ਸਿੱਧੀਆਂ ਹਨ, ਅਤੇ ਕੰਮ ਪੂਰਾ ਕਰਨ ਲਈ ਇੱਕ ਤੇਜ਼ @keyframes ਪਰਿਭਾਸ਼ਾ ਨੂੰ ਤਿਆਰ ਕਰਨਾ ਆਸਾਨ ਹੈ। ਇੱਕ ਕੇਂਦਰੀਕ੍ਰਿਤ ਐਨੀਮੇਸ਼ਨ ਸਿਸਟਮ ਤੋਂ ਬਿਨਾਂ, ਡਿਵੈਲਪਰ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਇਹ ਕੀਫ੍ਰੇਮ ਸਕ੍ਰੈਚ ਤੋਂ ਲਿਖਦੇ ਹਨ, ਇਸ ਗੱਲ ਤੋਂ ਅਣਜਾਣ ਕਿ ਕੋਡਬੇਸ ਵਿੱਚ ਸਮਾਨ ਐਨੀਮੇਸ਼ਨ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਮੌਜੂਦ ਹਨ। ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਆਮ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਕੰਪੋਨੈਂਟ-ਆਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ (ਜੋ ਸਾਡੇ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਅੱਜਕੱਲ੍ਹ ਕਰਦੇ ਹਨ) ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹਨ, ਕਿਉਂਕਿ ਟੀਮਾਂ ਅਕਸਰ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਵਿੱਚ ਸਮਾਨਾਂਤਰ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਨਤੀਜਾ? ਐਨੀਮੇਸ਼ਨ ਹਫੜਾ-ਦਫੜੀ। ਛੋਟੀ ਸਮੱਸਿਆ ਕੀਫ੍ਰੇਮ ਡੁਪਲੀਕੇਸ਼ਨ ਦੇ ਨਾਲ ਸਭ ਤੋਂ ਸਪੱਸ਼ਟ ਮੁੱਦੇ ਵਿਕਾਸ ਦੇ ਸਮੇਂ ਦੀ ਬਰਬਾਦੀ ਅਤੇ ਬੇਲੋੜੇ ਕੋਡ ਬਲੋਟ ਹਨ. ਮਲਟੀਪਲ ਕੀਫ੍ਰੇਮ ਪਰਿਭਾਸ਼ਾਵਾਂ ਦਾ ਮਤਲਬ ਹੈ ਲੋੜਾਂ ਬਦਲਣ 'ਤੇ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਕਈ ਥਾਂਵਾਂ। ਆਪਣੇ ਫੇਡ ਐਨੀਮੇਸ਼ਨ ਦੇ ਸਮੇਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ? ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡਬੇਸ ਵਿੱਚ ਹਰ ਮੌਕੇ ਦਾ ਸ਼ਿਕਾਰ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਆਸਾਨ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਮਿਆਰੀ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਸਾਰੀਆਂ ਭਿੰਨਤਾਵਾਂ ਨੂੰ ਲੱਭਣ ਲਈ ਚੰਗੀ ਕਿਸਮਤ। ਰੱਖ-ਰਖਾਅ ਦੇ ਬਿੰਦੂਆਂ ਦਾ ਇਹ ਗੁਣਾ ਸਧਾਰਨ ਐਨੀਮੇਸ਼ਨ ਅੱਪਡੇਟ ਨੂੰ ਵੀ ਸਮਾਂ ਬਰਬਾਦ ਕਰਨ ਵਾਲਾ ਕੰਮ ਬਣਾਉਂਦਾ ਹੈ। ਵੱਡੀ ਸਮੱਸਿਆ ਇਹ ਕੀਫ੍ਰੇਮ ਡੁਪਲੀਕੇਸ਼ਨ ਸਤ੍ਹਾ ਦੇ ਹੇਠਾਂ ਲੁਕੀ ਹੋਈ ਇੱਕ ਬਹੁਤ ਜ਼ਿਆਦਾ ਧੋਖੇਬਾਜ਼ ਸਮੱਸਿਆ ਪੈਦਾ ਕਰਦੀ ਹੈ: ਗਲੋਬਲ ਸਕੋਪ ਟ੍ਰੈਪ। ਕੰਪੋਨੈਂਟ-ਆਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਵੀ, CSS ਕੀਫ੍ਰੇਮ ਹਮੇਸ਼ਾ ਗਲੋਬਲ ਸਕੋਪ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਾਰੇ ਕੀਫ੍ਰੇਮ ਸਾਰੇ ਹਿੱਸਿਆਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ। ਹਮੇਸ਼ਾ. ਹਾਂ, ਤੁਹਾਡੀ ਐਨੀਮੇਸ਼ਨ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਫ੍ਰੇਮਾਂ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੀ। ਇਹ ਆਖਰੀ ਕੀਫ੍ਰੇਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਉਸੇ ਨਾਮ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ ਜੋ ਗਲੋਬਲ ਸਕੋਪ ਵਿੱਚ ਲੋਡ ਕੀਤੇ ਗਏ ਸਨ। ਜਿੰਨਾ ਚਿਰ ਤੁਹਾਡੇ ਸਾਰੇ ਕੀਫ੍ਰੇਮ ਇੱਕੋ ਜਿਹੇ ਹਨ, ਇਹ ਇੱਕ ਮਾਮੂਲੀ ਸਮੱਸਿਆ ਵਾਂਗ ਜਾਪ ਸਕਦਾ ਹੈ। ਪਰ ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਖਾਸ ਵਰਤੋਂ ਦੇ ਕੇਸ ਲਈ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਮੁਸੀਬਤ ਵਿੱਚ ਹੋ, ਜਾਂ ਇਸ ਤੋਂ ਵੀ ਮਾੜਾ, ਤੁਸੀਂ ਉਹਨਾਂ ਦਾ ਕਾਰਨ ਬਣੋਗੇ। ਜਾਂ ਤਾਂ ਤੁਹਾਡਾ ਐਨੀਮੇਸ਼ਨ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ ਕਿਉਂਕਿ ਤੁਹਾਡੇ ਤੋਂ ਬਾਅਦ ਕੋਈ ਹੋਰ ਕੰਪੋਨੈਂਟ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਤੁਹਾਡੇ ਕੀਫ੍ਰੇਮ ਨੂੰ ਓਵਰਰਾਈਟ ਕਰਦਾ ਹੈ, ਜਾਂ ਤੁਹਾਡਾ ਕੰਪੋਨੈਂਟ ਆਖਰੀ ਵਾਰ ਲੋਡ ਹੁੰਦਾ ਹੈ ਅਤੇ ਗਲਤੀ ਨਾਲ ਉਸ ਕੀਫ੍ਰੇਮ ਦੇ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਹਰ ਦੂਜੇ ਕੰਪੋਨੈਂਟ ਲਈ ਐਨੀਮੇਸ਼ਨ ਵਿਵਹਾਰ ਨੂੰ ਬਦਲਦਾ ਹੈ, ਅਤੇ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਇਸਦਾ ਅਹਿਸਾਸ ਵੀ ਨਾ ਹੋਵੇ। ਇੱਥੇ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਹੈ ਜੋ ਸਮੱਸਿਆ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ: .component-one { /* ਕੰਪੋਨੈਂਟ ਸਟਾਈਲ */ ਐਨੀਮੇਸ਼ਨ: ਪਲਸ 1s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ ਵਿਕਲਪਕ; }
/* ਇਹ @keyframes ਪਰਿਭਾਸ਼ਾ ਕੰਮ ਨਹੀਂ ਕਰੇਗੀ */ @keyframes ਪਲਸ { ਤੋਂ { ਸਕੇਲ: 1; } ਨੂੰ { ਸਕੇਲ: 1.1; } }
/* ਬਾਅਦ ਵਿੱਚ ਕੋਡ ਵਿੱਚ... */
.component-ਦੋ { /* ਕੰਪੋਨੈਂਟ ਸਟਾਈਲ */ ਐਨੀਮੇਸ਼ਨ: ਪਲਸ 1s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ; }
/* ਇਹ ਕੀਫ੍ਰੇਮ ਦੋਵਾਂ ਹਿੱਸਿਆਂ 'ਤੇ ਲਾਗੂ ਹੋਣਗੇ */ @keyframes ਪਲਸ { 0%, 20%, 100% { ਸਕੇਲ: 1; } 10%, 40% { ਸਕੇਲ: 1.2; } }
ਦੋਵੇਂ ਹਿੱਸੇ ਇੱਕੋ ਐਨੀਮੇਸ਼ਨ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਪਰ ਦੂਜੀ @keyframes ਪਰਿਭਾਸ਼ਾ ਪਹਿਲੇ ਨੂੰ ਓਵਰਰਾਈਟ ਕਰਦੀ ਹੈ। ਹੁਣ ਕੰਪੋਨੈਂਟ-ਵਨ ਅਤੇ ਕੰਪੋਨੈਂਟ-ਟੂ ਦੋਵੇਂ ਦੂਜੇ ਕੀਫ੍ਰੇਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਗੇ, ਇਸ ਗੱਲ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਕਿ ਕਿਹੜਾ ਕੰਪੋਨੈਂਟ ਕਿਹੜਾ ਕੀਫ੍ਰੇਮ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 1 [ਫੋਰਕਡ]। ਸਭ ਤੋਂ ਭੈੜਾ ਹਿੱਸਾ? ਇਹ ਅਕਸਰ ਸਥਾਨਕ ਵਿਕਾਸ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ ਉਤਪਾਦਨ ਵਿੱਚ ਰਹੱਸਮਈ ਢੰਗ ਨਾਲ ਟੁੱਟ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆਵਾਂ ਤੁਹਾਡੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਦੇ ਲੋਡਿੰਗ ਕ੍ਰਮ ਨੂੰ ਬਦਲਦੀਆਂ ਹਨ। ਤੁਸੀਂ ਐਨੀਮੇਸ਼ਨਾਂ ਦੇ ਨਾਲ ਖਤਮ ਹੁੰਦੇ ਹੋ ਜੋ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਹਿੱਸੇ ਲੋਡ ਕੀਤੇ ਗਏ ਹਨ ਅਤੇ ਕਿਸ ਕ੍ਰਮ ਵਿੱਚ ਹਨ। ਹੱਲ: ਯੂਨੀਫਾਈਡ ਕੀਫ੍ਰੇਮਜ਼ ਇਸ ਹਫੜਾ-ਦਫੜੀ ਦਾ ਜਵਾਬ ਹੈਰਾਨੀਜਨਕ ਤੌਰ 'ਤੇ ਸਧਾਰਨ ਹੈ: ਇੱਕ ਸ਼ੇਅਰਡ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਡਾਇਨਾਮਿਕ ਕੀਫ੍ਰੇਮਜ਼। ਹਰੇਕ ਹਿੱਸੇ ਨੂੰ ਇਸਦੇ ਆਪਣੇ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੇਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕੀਫ੍ਰੇਮ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਚੰਗੀ ਤਰ੍ਹਾਂ ਦਸਤਾਵੇਜ਼ੀ, ਆਸਾਨ ਹਨਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਖਾਸ ਲੋੜਾਂ ਦੀ ਵਰਤੋਂ, ਰੱਖ-ਰਖਾਅ ਅਤੇ ਅਨੁਕੂਲਿਤ। ਇਸ ਨੂੰ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਵਜੋਂ ਸੋਚੋ। ਜਿਸ ਤਰ੍ਹਾਂ ਅਸੀਂ ਰੰਗਾਂ ਅਤੇ ਸਪੇਸਿੰਗ ਲਈ ਟੋਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਸਾਡੇ ਵਿੱਚੋਂ ਬਹੁਤ ਸਾਰੇ ਪਹਿਲਾਂ ਹੀ ਐਨੀਮੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਟੋਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਮਿਆਦ ਅਤੇ ਆਸਾਨ ਫੰਕਸ਼ਨਾਂ ਲਈ, ਕਿਉਂ ਨਾ ਕੀਫ੍ਰੇਮ ਲਈ ਟੋਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ? ਇਹ ਪਹੁੰਚ ਤੁਹਾਡੇ ਦੁਆਰਾ ਵਰਤ ਰਹੇ ਕਿਸੇ ਵੀ ਮੌਜੂਦਾ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਵਰਕਫਲੋ ਨਾਲ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਏਕੀਕ੍ਰਿਤ ਹੋ ਸਕਦੀ ਹੈ, ਜਦੋਂ ਕਿ ਛੋਟੀ ਸਮੱਸਿਆ (ਕੋਡ ਡੁਪਲੀਕੇਸ਼ਨ) ਅਤੇ ਵੱਡੀ ਸਮੱਸਿਆ (ਗਲੋਬਲ ਸਕੋਪ ਟਕਰਾਅ) ਦੋਵਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਹੱਲ ਕਰਦੇ ਹੋਏ। ਇਹ ਵਿਚਾਰ ਸਿੱਧਾ ਹੈ: ਸਾਡੇ ਸਾਰੇ ਸਾਂਝੇ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਸੱਚਾਈ ਦਾ ਇੱਕ ਸਰੋਤ ਬਣਾਓ। ਇਸ ਸਾਂਝੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਸਾਵਧਾਨੀ ਨਾਲ ਤਿਆਰ ਕੀਤੇ ਗਏ ਕੀਫ੍ਰੇਮ ਸ਼ਾਮਲ ਹਨ ਜੋ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਅਸਲ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਐਨੀਮੇਸ਼ਨ ਪੈਟਰਨਾਂ ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ। ਸਾਡੇ ਕੋਡਬੇਸ ਵਿੱਚ ਇੱਕ ਫੇਡ ਐਨੀਮੇਸ਼ਨ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਮੌਜੂਦ ਹੈ ਜਾਂ ਨਹੀਂ, ਇਸ ਬਾਰੇ ਕੋਈ ਹੋਰ ਅੰਦਾਜ਼ਾ ਨਹੀਂ ਲਗਾਉਣਾ। ਹੋਰ ਕੰਪੋਨੈਂਟਾਂ ਤੋਂ ਗਲਤੀ ਨਾਲ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਓਵਰਰਾਈਟ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ। ਪਰ ਇੱਥੇ ਕੁੰਜੀ ਹੈ: ਇਹ ਸਿਰਫ਼ ਸਥਿਰ ਕਾਪੀ-ਪੇਸਟ ਐਨੀਮੇਸ਼ਨ ਨਹੀਂ ਹਨ। ਉਹਨਾਂ ਨੂੰ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਗਤੀਸ਼ੀਲ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਸ ਨਾਲ ਸਾਨੂੰ ਇਕਸਾਰਤਾ ਬਣਾਈ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਮਿਲਦੀ ਹੈ ਜਦੋਂ ਕਿ ਅਜੇ ਵੀ ਵਿਸ਼ੇਸ਼ ਵਰਤੋਂ ਦੇ ਮਾਮਲਿਆਂ ਵਿੱਚ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਲਚਕਤਾ ਹੁੰਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਜੇਕਰ ਤੁਹਾਨੂੰ ਇੱਕ ਥਾਂ 'ਤੇ ਥੋੜਾ ਜਿਹਾ ਵੱਡਾ "ਪਲਸ" ਐਨੀਮੇਸ਼ਨ ਚਾਹੀਦਾ ਹੈ। ਪਹਿਲਾ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਬਣਾਉਣਾ ਪਹਿਲੇ ਘੱਟ ਲਟਕਣ ਵਾਲੇ ਫਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਜਿਸ ਨਾਲ ਸਾਨੂੰ ਨਜਿੱਠਣਾ ਚਾਹੀਦਾ ਹੈ ਉਹ ਹੈ “ਫੇਡ-ਇਨ” ਐਨੀਮੇਸ਼ਨ। ਮੇਰੇ ਹਾਲ ਹੀ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚੋਂ ਇੱਕ ਵਿੱਚ, ਮੈਨੂੰ ਇੱਕ ਦਰਜਨ ਤੋਂ ਵੱਧ ਵੱਖਰੀਆਂ ਫੇਡ-ਇਨ ਪਰਿਭਾਸ਼ਾਵਾਂ ਮਿਲੀਆਂ ਹਨ, ਅਤੇ ਹਾਂ, ਉਹ ਸਾਰੇ ਸਿਰਫ਼ 0 ਤੋਂ 1 ਤੱਕ ਧੁੰਦਲਾਪਨ ਨੂੰ ਐਨੀਮੇਟ ਕਰਦੇ ਹਨ। ਇਸ ਲਈ, ਆਓ ਇੱਕ ਨਵੀਂ ਸਟਾਈਲਸ਼ੀਟ ਬਣਾਈਏ, ਇਸਨੂੰ kf-tokens.css ਕਹਿੰਦੇ ਹਾਂ, ਇਸਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਆਯਾਤ ਕਰੀਏ, ਅਤੇ ਇਸਦੇ ਅੰਦਰ ਸਹੀ ਟਿੱਪਣੀਆਂ ਦੇ ਨਾਲ ਸਾਡੇ ਕੀਫ੍ਰੇਮ ਰੱਖੋ। /* keyframes-tokens.css */
/* * ਫੇਡ ਇਨ - ਫੇਡ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨ * ਵਰਤੋਂ: ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { ਤੋਂ { ਧੁੰਦਲਾਪਨ: 0; } ਨੂੰ { ਧੁੰਦਲਾਪਨ: 1; } }
ਇਹ ਸਿੰਗਲ @keyframes ਘੋਸ਼ਣਾ ਸਾਡੇ ਕੋਡਬੇਸ ਵਿੱਚ ਉਹਨਾਂ ਸਾਰੇ ਖਿੰਡੇ ਹੋਏ ਫੇਡ-ਇਨ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਬਦਲ ਦਿੰਦੀ ਹੈ। ਸਾਫ਼, ਸਧਾਰਨ ਅਤੇ ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ ਲਾਗੂ। ਅਤੇ ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇਹ ਟੋਕਨ ਪਰਿਭਾਸ਼ਿਤ ਹੈ, ਅਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਿਸੇ ਵੀ ਹਿੱਸੇ ਤੋਂ ਵਰਤ ਸਕਦੇ ਹਾਂ: .modal { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.3s ease-out; }
.ਟੂਲਟਿਪ { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.2s ਈਜ਼-ਇਨ-ਆਊਟ; }
.ਸੂਚਨਾ { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.5s ease-out; }
ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 2 [ਫੋਰਕਡ]। ਨੋਟ: ਅਸੀਂ ਆਪਣੇ ਸਾਰੇ @keyframes ਨਾਵਾਂ ਵਿੱਚ kf- ਅਗੇਤਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਅਗੇਤਰ ਇੱਕ ਨੇਮਸਪੇਸ ਦੇ ਤੌਰ ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ ਜੋ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਮੌਜੂਦਾ ਐਨੀਮੇਸ਼ਨਾਂ ਨਾਲ ਨਾਮਕਰਨ ਟਕਰਾਅ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਇਹ ਤੁਰੰਤ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਕੀਫ੍ਰੇਮ ਸਾਡੀ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਫਾਈਲ ਤੋਂ ਆਉਂਦੇ ਹਨ। ਇੱਕ ਡਾਇਨਾਮਿਕ ਸਲਾਈਡ ਬਣਾਉਣਾ kf-fade-in keyframes ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਇਹ ਸਧਾਰਨ ਹੈ ਅਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਗੜਬੜ ਕਰਨ ਲਈ ਬਹੁਤ ਘੱਟ ਥਾਂ ਹੈ। ਦੂਜੇ ਐਨੀਮੇਸ਼ਨਾਂ ਵਿੱਚ, ਹਾਲਾਂਕਿ, ਸਾਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਗਤੀਸ਼ੀਲ ਹੋਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਅਤੇ ਇੱਥੇ ਅਸੀਂ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਿਸ਼ਾਲ ਸ਼ਕਤੀ ਦਾ ਲਾਭ ਉਠਾ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਸੱਚਮੁੱਚ ਖਿੰਡੇ ਹੋਏ ਸਥਿਰ ਐਨੀਮੇਸ਼ਨਾਂ ਦੇ ਮੁਕਾਬਲੇ ਚਮਕਦੇ ਹਨ। ਚਲੋ ਇੱਕ ਆਮ ਦ੍ਰਿਸ਼ ਲੈਂਦੇ ਹਾਂ: “ਸਲਾਈਡ-ਇਨ” ਐਨੀਮੇਸ਼ਨ। ਪਰ ਕਿੱਥੋਂ ਖਿਸਕਣਾ? ਸੱਜੇ ਤੋਂ 100px? ਖੱਬੇ ਤੋਂ 50%? ਕੀ ਇਹ ਸਕ੍ਰੀਨ ਦੇ ਸਿਖਰ ਤੋਂ ਦਾਖਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ? ਜਾਂ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਹੇਠਾਂ ਤੋਂ ਅੰਦਰ ਫਲੋਟ ਕਰੋ? ਬਹੁਤ ਸਾਰੀਆਂ ਸੰਭਾਵਨਾਵਾਂ, ਪਰ ਹਰੇਕ ਦਿਸ਼ਾ ਅਤੇ ਹਰੇਕ ਪਰਿਵਰਤਨ ਲਈ ਵੱਖਰੇ ਕੀਫ੍ਰੇਮ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਇੱਕ ਲਚਕਦਾਰ ਟੋਕਨ ਬਣਾ ਸਕਦੇ ਹਾਂ ਜੋ ਸਾਰੇ ਦ੍ਰਿਸ਼ਾਂ ਦੇ ਅਨੁਕੂਲ ਹੋਵੇ: /* * ਸਲਾਈਡ ਇਨ - ਦਿਸ਼ਾਤਮਕ ਸਲਾਈਡ ਐਨੀਮੇਸ਼ਨ * ਦਿਸ਼ਾ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ --kf-slide-from ਦੀ ਵਰਤੋਂ ਕਰੋ * ਡਿਫੌਲਟ: ਖੱਬੇ ਤੋਂ ਅੰਦਰ ਸਲਾਈਡ (-100%) * ਵਰਤੋਂ: * ਐਨੀਮੇਸ਼ਨ: kf-ਸਲਾਈਡ-ਇਨ 0.3s ਈਜ਼-ਆਊਟ; * --kf-slide-from: -100px 0; // ਖੱਬੇ ਤੋਂ ਸਲਾਈਡ * --kf-slide-from: 100px 0; // ਸੱਜੇ ਤੋਂ ਸਲਾਈਡ * --kf-slide-from: 0 -50px; // ਸਿਖਰ ਤੋਂ ਸਲਾਈਡ */
@keyframes kf-slide-in { ਤੋਂ { ਅਨੁਵਾਦ ਕਰੋ: var(--kf-slide-from, -100% 0); } ਨੂੰ { ਅਨੁਵਾਦ: 0 0; } }
ਹੁਣ ਅਸੀਂ ਕਿਸੇ ਵੀ ਸਲਾਈਡ ਦਿਸ਼ਾ ਲਈ ਇਸ ਸਿੰਗਲ @keyframes ਟੋਕਨ ਦੀ ਵਰਤੋਂ --kf-slide-from ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਬਦਲ ਕੇ ਕਰ ਸਕਦੇ ਹਾਂ: .ਸਾਈਡਬਾਰ { ਐਨੀਮੇਸ਼ਨ: kf-ਸਲਾਈਡ-ਇਨ 0.3s ਈਜ਼-ਆਊਟ; /* ਡਿਫੌਲਟ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ: ਖੱਬੇ ਤੋਂ ਸਲਾਈਡ */ }
.ਸੂਚਨਾ { ਐਨੀਮੇਸ਼ਨ: kf-ਸਲਾਈਡ-ਇਨ 0.4s ਈਜ਼-ਆਊਟ; --kf-slide-from: 0 -50px; /* ਸਿਖਰ ਤੋਂ ਸਲਾਈਡ */ }
.modal { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.5s, kf-ਸਲਾਈਡ-ਇਨ 0.5s ਕਿਊਬਿਕ-ਬੇਜ਼ੀਅਰ(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* ਹੇਠਾਂ-ਸੱਜੇ ਤੋਂ ਸਲਾਈਡ */ }
ਇਹ ਪਹੁੰਚ ਸਾਨੂੰ ਇਕਸਾਰਤਾ ਬਣਾਈ ਰੱਖਦੇ ਹੋਏ ਸ਼ਾਨਦਾਰ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਇੱਕ ਕੀਫ੍ਰੇਮ ਘੋਸ਼ਣਾ, ਬੇਅੰਤ ਸੰਭਾਵਨਾਵਾਂ। ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 3 [ਫੋਰਕਡ]। ਅਤੇ ਜੇਕਰ ਅਸੀਂ ਆਪਣੀਆਂ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਹੋਰ ਵੀ ਲਚਕਦਾਰ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, "ਸਲਾਈਡ-ਆਊਟ" ਪ੍ਰਭਾਵਾਂ ਦੀ ਵੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ, ਅਸੀਂ ਕਰ ਸਕਦੇ ਹਾਂਬਸ ਇੱਕ --kf-slide-ਨੂੰ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਜੋੜੋ, ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਅਗਲੇ ਭਾਗ ਵਿੱਚ ਦੇਖਾਂਗੇ। ਦੋ-ਦਿਸ਼ਾਵੀ ਜ਼ੂਮ ਕੀਫ੍ਰੇਮਸ ਇੱਕ ਹੋਰ ਆਮ ਐਨੀਮੇਸ਼ਨ ਜੋ ਸਾਰੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਡੁਪਲੀਕੇਟ ਹੁੰਦੀ ਹੈ "ਜ਼ੂਮ" ਪ੍ਰਭਾਵ ਹੈ। ਭਾਵੇਂ ਇਹ ਟੋਸਟ ਸੁਨੇਹਿਆਂ ਲਈ ਇੱਕ ਸੂਖਮ ਸਕੇਲ-ਅੱਪ ਹੋਵੇ, ਮਾਡਲਾਂ ਲਈ ਇੱਕ ਨਾਟਕੀ ਜ਼ੂਮ-ਇਨ, ਜਾਂ ਸਿਰਲੇਖਾਂ ਲਈ ਇੱਕ ਕੋਮਲ ਸਕੇਲ-ਡਾਊਨ ਪ੍ਰਭਾਵ, ਜ਼ੂਮ ਐਨੀਮੇਸ਼ਨ ਹਰ ਜਗ੍ਹਾ ਹਨ। ਹਰੇਕ ਸਕੇਲ ਮੁੱਲ ਲਈ ਵੱਖਰੇ ਕੀਫ੍ਰੇਮ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਆਓ kf-ਜ਼ੂਮ ਕੀਫ੍ਰੇਮਾਂ ਦਾ ਇੱਕ ਲਚਕੀਲਾ ਸੈੱਟ ਬਣਾਈਏ:
/* * ਜ਼ੂਮ - ਸਕੇਲ ਐਨੀਮੇਸ਼ਨ * ਸਕੇਲ ਮੁੱਲਾਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ --kf-zoom-from ਅਤੇ --kf-zoom-to ਦੀ ਵਰਤੋਂ ਕਰੋ * ਡਿਫੌਲਟ: 80% ਤੋਂ 100% ਤੱਕ ਜ਼ੂਮ (0.8 ਤੋਂ 1) * ਵਰਤੋਂ: * ਐਨੀਮੇਸ਼ਨ: kf-ਜ਼ੂਮ 0.2s ਈਜ਼-ਆਊਟ; * --kf-ਜ਼ੂਮ-ਤੋਂ: 0.5; --kf-ਜ਼ੂਮ-ਟੂ: 1; // 50% ਤੋਂ 100% ਤੱਕ ਜ਼ੂਮ ਕਰੋ * --kf-ਜ਼ੂਮ-ਤੋਂ: 1; --kf-ਜ਼ੂਮ-ਟੂ: 0; // 100% ਤੋਂ 0% ਤੱਕ ਜ਼ੂਮ ਕਰੋ * --kf-ਜ਼ੂਮ-ਤੋਂ: 1; --kf-ਜ਼ੂਮ-ਟੂ: 1.1; // 100% ਤੋਂ 110% ਤੱਕ ਜ਼ੂਮ ਕਰੋ */
@keyframes kf-ਜ਼ੂਮ { ਤੋਂ { ਸਕੇਲ: var(-kf-ਜ਼ੂਮ-ਤੋਂ, 0.8); } ਨੂੰ { ਸਕੇਲ: var(--kf-ਜ਼ੂਮ-ਟੂ, 1); } }
ਇੱਕ ਪਰਿਭਾਸ਼ਾ ਦੇ ਨਾਲ, ਅਸੀਂ ਕਿਸੇ ਵੀ ਜ਼ੂਮ ਪਰਿਵਰਤਨ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ ਜਿਸਦੀ ਸਾਨੂੰ ਲੋੜ ਹੈ: .ਟੋਸਟ { ਐਨੀਮੇਸ਼ਨ: kf-ਸਲਾਈਡ-ਇਨ 0.2s, kf-ਜ਼ੂਮ 0.4s ਆਸਾਨ-ਆਉਟ; --kf-slide-from: 0 100%; /* ਸਿਖਰ ਤੋਂ ਸਲਾਈਡ */ /* ਡਿਫੌਲਟ ਜ਼ੂਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ: 80% ਤੋਂ 100% ਤੱਕ ਸਕੇਲ */ }
.modal { ਐਨੀਮੇਸ਼ਨ: kf-ਜ਼ੂਮ 0.3s ਕਿਊਬਿਕ-ਬੇਜ਼ੀਅਰ(0.34, 1.56, 0.64, 1); --kf-ਜ਼ੂਮ-ਤੋਂ: 0; /* 0% ਤੋਂ 100% ਤੱਕ ਨਾਟਕੀ ਜ਼ੂਮ */ }
.ਸਿਰਲੇਖ { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 2s, kf-ਜ਼ੂਮ 2s ਈਜ਼-ਇਨ; --kf-ਜ਼ੂਮ-ਤੋਂ: 1.2; --kf-ਜ਼ੂਮ-ਟੂ: 0.8; /* ਕੋਮਲ ਸਕੇਲ ਹੇਠਾਂ */ }
0.8 (80%) ਦਾ ਡਿਫੌਲਟ ਜ਼ਿਆਦਾਤਰ UI ਤੱਤਾਂ, ਜਿਵੇਂ ਕਿ ਟੋਸਟ ਸੁਨੇਹਿਆਂ ਅਤੇ ਕਾਰਡਾਂ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਅਜੇ ਵੀ ਵਿਸ਼ੇਸ਼ ਮਾਮਲਿਆਂ ਲਈ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਆਸਾਨ ਹੈ। ਪੈੱਨ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 4 [ਫੋਰਕਡ]। ਤੁਸੀਂ ਹਾਲੀਆ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਕੁਝ ਦਿਲਚਸਪ ਦੇਖਿਆ ਹੋਵੇਗਾ: ਅਸੀਂ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਜੋੜ ਰਹੇ ਹਾਂ। @keyframes ਟੋਕਨਾਂ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਦਾ ਇੱਕ ਮੁੱਖ ਫਾਇਦਾ ਇਹ ਹੈ ਕਿ ਉਹ ਇੱਕ ਦੂਜੇ ਨਾਲ ਸਹਿਜਤਾ ਨਾਲ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ। ਇਹ ਨਿਰਵਿਘਨ ਰਚਨਾ ਜਾਣਬੁੱਝ ਕੇ ਹੈ, ਅਚਾਨਕ ਨਹੀਂ। ਅਸੀਂ ਐਨੀਮੇਸ਼ਨ ਰਚਨਾ ਬਾਰੇ ਬਾਅਦ ਵਿੱਚ ਹੋਰ ਵਿਸਥਾਰ ਵਿੱਚ ਚਰਚਾ ਕਰਾਂਗੇ, ਜਿਸ ਵਿੱਚ ਇਹ ਵੀ ਸ਼ਾਮਲ ਹੈ ਕਿ ਉਹ ਕਿੱਥੇ ਸਮੱਸਿਆ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ, ਪਰ ਜ਼ਿਆਦਾਤਰ ਸੰਜੋਗ ਸਿੱਧੇ ਅਤੇ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਆਸਾਨ ਹੁੰਦੇ ਹਨ। ਨੋਟ: ਇਸ ਲੇਖ ਨੂੰ ਲਿਖਣ ਵੇਲੇ, ਅਤੇ ਸ਼ਾਇਦ ਇਸ ਨੂੰ ਲਿਖਣ ਦੇ ਕਾਰਨ, ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨਾਂ ਦੇ ਪੂਰੇ ਵਿਚਾਰ 'ਤੇ ਮੁੜ ਵਿਚਾਰ ਕਰਦਿਆਂ ਪਾਇਆ। CSS ਵਿੱਚ ਹਾਲ ਹੀ ਦੀਆਂ ਸਾਰੀਆਂ ਤਰੱਕੀਆਂ ਦੇ ਨਾਲ, ਕੀ ਸਾਨੂੰ ਅਜੇ ਵੀ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੈ? ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਐਡਮ ਅਰਗਾਇਲ ਨੇ ਉਹੀ ਸਵਾਲਾਂ ਦੀ ਪੜਚੋਲ ਕੀਤੀ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਬਲੌਗ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਪ੍ਰਗਟ ਕੀਤਾ। ਇਹ ਇੱਥੇ ਲਿਖੀਆਂ ਗੱਲਾਂ ਦਾ ਖੰਡਨ ਨਹੀਂ ਕਰਦਾ, ਪਰ ਇਹ ਵਿਚਾਰਨ ਯੋਗ ਪਹੁੰਚ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨਾਂ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਲਗਾਤਾਰ ਐਨੀਮੇਸ਼ਨ ਜਦੋਂ ਕਿ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨਾਂ, ਜਿਵੇਂ ਕਿ "ਫੇਡ", "ਸਲਾਈਡ", ਅਤੇ "ਜ਼ੂਮ" ਇੱਕ ਵਾਰ ਵਾਪਰਦੀਆਂ ਹਨ ਅਤੇ ਫਿਰ ਰੁਕ ਜਾਂਦੀਆਂ ਹਨ, ਲਗਾਤਾਰ ਐਨੀਮੇਸ਼ਨਾਂ ਧਿਆਨ ਖਿੱਚਣ ਜਾਂ ਚੱਲ ਰਹੀ ਗਤੀਵਿਧੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਅਣਮਿੱਥੇ ਸਮੇਂ ਲਈ ਲੂਪ ਹੁੰਦੀਆਂ ਹਨ। ਦੋ ਸਭ ਤੋਂ ਵੱਧ ਆਮ ਨਿਰੰਤਰ ਐਨੀਮੇਸ਼ਨ ਜੋ ਮੈਨੂੰ ਮਿਲਦੀਆਂ ਹਨ ਉਹ ਹਨ "ਸਪਿਨ" (ਲੋਡਿੰਗ ਸੂਚਕਾਂ ਲਈ) ਅਤੇ "ਪਲਸ" (ਮਹੱਤਵਪੂਰਨ ਤੱਤਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ)। ਇਹ ਐਨੀਮੇਸ਼ਨ ਵਿਲੱਖਣ ਚੁਣੌਤੀਆਂ ਪੇਸ਼ ਕਰਦੇ ਹਨ ਜਦੋਂ ਇਹ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਬਣਾਉਣ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ। ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨਾਂ ਦੇ ਉਲਟ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਰਾਜ ਤੋਂ ਦੂਜੇ ਰਾਜ ਵਿੱਚ ਜਾਂਦੇ ਹਨ, ਨਿਰੰਤਰ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਵਿਵਹਾਰ ਪੈਟਰਨਾਂ ਵਿੱਚ ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਨੁਕੂਲਿਤ ਹੋਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸਪਿਨ ਡਾਕਟਰ ਹਰ ਪ੍ਰੋਜੈਕਟ ਮਲਟੀਪਲ ਸਪਿਨ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਜਾਪਦਾ ਹੈ। ਕੁਝ ਘੜੀ ਦੀ ਦਿਸ਼ਾ ਵਿੱਚ ਘੁੰਮਦੇ ਹਨ, ਦੂਸਰੇ ਘੜੀ ਦੀ ਦਿਸ਼ਾ ਵਿੱਚ ਘੁੰਮਦੇ ਹਨ। ਕੁਝ ਇੱਕ ਸਿੰਗਲ 360-ਡਿਗਰੀ ਰੋਟੇਸ਼ਨ ਕਰਦੇ ਹਨ, ਦੂਸਰੇ ਇੱਕ ਤੇਜ਼ ਪ੍ਰਭਾਵ ਲਈ ਕਈ ਵਾਰੀ ਕਰਦੇ ਹਨ। ਹਰੇਕ ਪਰਿਵਰਤਨ ਲਈ ਵੱਖਰੇ ਕੀਫ੍ਰੇਮ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਆਓ ਇੱਕ ਲਚਕਦਾਰ ਸਪਿਨ ਬਣਾਈਏ ਜੋ ਸਾਰੇ ਦ੍ਰਿਸ਼ਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ:
/* * ਸਪਿਨ - ਰੋਟੇਸ਼ਨ ਐਨੀਮੇਸ਼ਨ * ਰੋਟੇਸ਼ਨ ਰੇਂਜ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ --kf-spin-from ਅਤੇ --kf-spin-to ਦੀ ਵਰਤੋਂ ਕਰੋ * ਰੋਟੇਸ਼ਨ ਮਾਤਰਾ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ --kf-spin-turns ਦੀ ਵਰਤੋਂ ਕਰੋ * ਡਿਫੌਲਟ: 0deg ਤੋਂ 360deg ਤੱਕ ਘੁੰਮਦਾ ਹੈ (1 ਪੂਰਾ ਰੋਟੇਸ਼ਨ) * ਵਰਤੋਂ: * ਐਨੀਮੇਸ਼ਨ: kf-ਸਪਿਨ 1s ਲੀਨੀਅਰ ਅਨੰਤ; * --kf-ਸਪਿਨ-ਵਾਰੀ: 2; // 2 ਪੂਰੀ ਰੋਟੇਸ਼ਨ * --kf-ਸਪਿਨ-ਤੋਂ: 0deg; --kf-ਸਪਿਨ-ਟੂ: 180 ਡਿਗਰੀ; // ਅੱਧਾ ਰੋਟੇਸ਼ਨ * --kf-ਸਪਿਨ-ਤੋਂ: 0deg; --kf-spin-to: -360deg; // ਘੜੀ ਦੇ ਉਲਟ */
@keyframes kf-ਸਪਿਨ { ਤੋਂ { ਘੁੰਮਾਓ: var(--kf-ਸਪਿਨ-ਤੋਂ, 0deg); } ਨੂੰ { ਘੁੰਮਾਓ: calc(var(--kf-ਸਪਿਨ-ਤੋਂ, 0deg) + var(--kf-ਸਪਿਨ-ਤੋਂ, 360deg) * var(--kf-ਸਪਿਨ-ਵਾਰੀ, 1)); } }
ਹੁਣ ਅਸੀਂ ਕੋਈ ਵੀ ਸਪਿਨ ਪਰਿਵਰਤਨ ਬਣਾ ਸਕਦੇ ਹਾਂ ਜੋ ਸਾਨੂੰ ਪਸੰਦ ਹੈ:
.ਲੋਡਿੰਗ-ਸਪਿਨਰ { ਐਨੀਮੇਸ਼ਨ: kf-spin 1s ਲੀਨੀਅਰ ਅਨੰਤ; /* ਡਿਫੌਲਟ ਵਰਤਦਾ ਹੈ: 0deg ਤੋਂ 360deg ਤੱਕ ਘੁੰਮਦਾ ਹੈ */ }
.ਫਾਸਟ-ਲੋਡਰ { ਐਨੀਮੇਸ਼ਨ: kf-ਸਪਿਨ 1.2s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ ਵਿਕਲਪਕ; --kf-ਸਪਿਨ-ਵਾਰੀ: 3; /* ਪ੍ਰਤੀ ਚੱਕਰ ਹਰੇਕ ਦਿਸ਼ਾ ਲਈ 3 ਪੂਰੇ ਰੋਟੇਸ਼ਨ*/ }
.steped-reverse { ਐਨੀਮੇਸ਼ਨ: kf-ਸਪਿਨ 1.5s ਸਟੈਪਸ(8) ਅਨੰਤ; --kf-spin-to: -360deg; /* ਘੜੀ ਦੇ ਉਲਟ */ }
.subtle-wiggle { ਐਨੀਮੇਸ਼ਨ: kf-spin 2s ease-in-out infinite alternate; --kf-ਸਪਿਨ-ਤੋਂ: -16 ਡਿਗਰੀ; --kf-ਸਪਿਨ-ਨੂੰ: 32 ਡਿਗਰੀ; /* 36 ਡਿਗਰੀ ਹਿੱਲਣਾ: -18 ਡਿਗਰੀ ਅਤੇ +18 ਡਿਗਰੀ ਦੇ ਵਿਚਕਾਰ */ }
ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 5 [ਫੋਰਕਡ]। ਇਸ ਪਹੁੰਚ ਦੀ ਸੁੰਦਰਤਾ ਇਹ ਹੈ ਕਿ ਉਹੀ ਕੀਫ੍ਰੇਮ ਸਪਿਨਰਾਂ ਨੂੰ ਲੋਡ ਕਰਨ, ਆਈਕਨਾਂ ਨੂੰ ਘੁੰਮਾਉਣ, ਵਿਗਲ ਪ੍ਰਭਾਵਾਂ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਗੁੰਝਲਦਾਰ ਮਲਟੀ-ਟਰਨ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਵੀ ਕੰਮ ਕਰਦੇ ਹਨ। ਪਲਸ ਪੈਰਾਡੌਕਸ ਪਲਸ ਐਨੀਮੇਸ਼ਨ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਹਨ ਕਿਉਂਕਿ ਉਹ ਵੱਖ-ਵੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ "ਪਲਸ" ਕਰ ਸਕਦੇ ਹਨ। ਕੁਝ ਪੈਮਾਨੇ ਨੂੰ ਪਲਸ ਕਰਦੇ ਹਨ, ਦੂਸਰੇ ਧੁੰਦਲਾਪਨ, ਅਤੇ ਕੁਝ ਪਲਸ ਰੰਗ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਵੇਂ ਚਮਕ ਜਾਂ ਸੰਤ੍ਰਿਪਤਾ। ਹਰੇਕ ਪ੍ਰਾਪਰਟੀ ਲਈ ਵੱਖਰੇ ਕੀਫ੍ਰੇਮ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਕੀਫ੍ਰੇਮ ਬਣਾ ਸਕਦੇ ਹਾਂ ਜੋ ਕਿਸੇ ਵੀ CSS ਪ੍ਰਾਪਰਟੀ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ। ਇੱਥੇ ਸਕੇਲ ਅਤੇ ਧੁੰਦਲਾਪਨ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਇੱਕ ਪਲਸ ਕੀਫ੍ਰੇਮ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
/* * ਪਲਸ - ਪਲਸਿੰਗ ਐਨੀਮੇਸ਼ਨ * ਸਕੇਲ ਰੇਂਜ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ --kf-pulse-scale-from ਅਤੇ --kf-pulse-scale-to ਦੀ ਵਰਤੋਂ ਕਰੋ ਧੁੰਦਲਾਪਨ ਰੇਂਜ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ --kf-pulse-opacity-from ਅਤੇ --kf-pulse-opacity-to ਦੀ ਵਰਤੋਂ ਕਰੋ। * ਡਿਫੌਲਟ: ਕੋਈ ਪਲਸ ਨਹੀਂ (ਸਾਰੇ ਮੁੱਲ 1) * ਵਰਤੋਂ: * ਐਨੀਮੇਸ਼ਨ: kf-pulse 2s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ ਵਿਕਲਪਕ; * --kf-ਪਲਸ-ਸਕੇਲ-ਤੋਂ: 0.95; --kf-ਪਲਸ-ਸਕੇਲ-ਟੂ: 1.05; // ਸਕੇਲ ਪਲਸ * --kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ: 0.7; --kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਨੂੰ: 1; // ਧੁੰਦਲਾਪਨ ਪਲਸ */
@keyframes kf-ਪਲਸ { ਤੋਂ { ਸਕੇਲ: var(--kf-pulse-scale-from, 1); ਧੁੰਦਲਾਪਨ: var(--kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ, 1); } ਨੂੰ { ਸਕੇਲ: var(-kf-pulse-scale-to, 1); ਧੁੰਦਲਾਪਨ: var(--kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ, 1); } }
ਇਹ ਇੱਕ ਲਚਕਦਾਰ ਪਲਸ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਕਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰ ਸਕਦਾ ਹੈ: .ਕਾਲ-ਟੂ-ਐਕਸ਼ਨ { ਐਨੀਮੇਸ਼ਨ: kf-ਪਲਸ 0.6s ਅਨੰਤ ਵਿਕਲਪਕ; --kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ: 0.5; /* ਧੁੰਦਲਾਪਨ ਪਲਸ */ }
.notification-dot { ਐਨੀਮੇਸ਼ਨ: kf-ਪਲਸ 0.6s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ ਵਿਕਲਪਕ; --kf-ਪਲਸ-ਸਕੇਲ-ਤੋਂ: 0.9; --kf-ਪਲਸ-ਸਕੇਲ-ਟੂ: 1.1; /* ਸਕੇਲ ਪਲਸ */ }
ਟੈਕਸਟ-ਹਾਈਲਾਈਟ { ਐਨੀਮੇਸ਼ਨ: kf-pulse 1.5s ease-out infinite; --kf-ਪਲਸ-ਸਕੇਲ-ਤੋਂ: 0.8; --kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ: 0.2; /* ਸਕੇਲ ਅਤੇ ਧੁੰਦਲਾਪਨ ਪਲਸ */ }
ਪੈੱਨ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਵੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 6 [ਫੋਰਕਡ]। ਇਹ ਸਿੰਗਲ kf-ਪਲਸ ਕੀਫ੍ਰੇਮ ਸੂਖਮ ਧਿਆਨ ਖਿੱਚਣ ਤੋਂ ਲੈ ਕੇ ਨਾਟਕੀ ਹਾਈਲਾਈਟਸ ਤੱਕ ਹਰ ਚੀਜ਼ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ। ਐਡਵਾਂਸਡ ਈਜ਼ਿੰਗ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜ਼ਾਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਸਾਡੀ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀ ਦਾ ਵਿਸਤਾਰ ਕਰਨਾ ਅਤੇ ਪ੍ਰਭਾਵ ਪ੍ਰਦਾਨ ਕਰਨਾ ਕਿੰਨਾ ਆਸਾਨ ਹੈ ਜੋ ਜ਼ਿਆਦਾਤਰ ਵਿਕਾਸਕਾਰ ਸਕ੍ਰੈਚ ਤੋਂ ਲਿਖਣ ਦੀ ਖੇਚਲ ਨਹੀਂ ਕਰਨਗੇ, ਜਿਵੇਂ ਕਿ ਲਚਕੀਲੇ ਜਾਂ ਉਛਾਲ। ਇੱਥੇ ਇੱਕ ਸਧਾਰਨ "ਬਾਊਂਸ" ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ ਜੰਪ ਦੀ ਉਚਾਈ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਇੱਕ --kf-bounce-from ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। /* * ਬਾਊਂਸ - ਬਾਊਂਸਿੰਗ ਐਂਟਰੈਂਸ ਐਨੀਮੇਸ਼ਨ * ਜੰਪ ਦੀ ਉਚਾਈ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ --kf-bounce-from ਦੀ ਵਰਤੋਂ ਕਰੋ * ਡਿਫੌਲਟ: 100vh (ਆਫ ਸਕ੍ਰੀਨ) ਤੋਂ ਛਾਲ ਮਾਰਦਾ ਹੈ * ਵਰਤੋਂ: * ਐਨੀਮੇਸ਼ਨ: kf-ਬਾਊਂਸ 3s ਈਜ਼-ਇਨ; * --kf-ਬਾਊਂਸ-ਤੋਂ: 200px; // 200px ਉਚਾਈ ਤੋਂ ਛਾਲ ਮਾਰੋ */
@keyframes kf-ਬਾਊਂਸ { 0% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -1); }
34% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -0.4); }
55% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -0.2); }
72% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -0.1); }
85% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -0.05); }
94% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -0.025); }
99% { ਅਨੁਵਾਦ ਕਰੋ: 0 calc(var(-kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { ਅਨੁਵਾਦ: 0 0; ਐਨੀਮੇਸ਼ਨ-ਟਾਈਮਿੰਗ-ਫੰਕਸ਼ਨ: ਆਸਾਨ-ਆਉਟ; } }
ਕੀਫ੍ਰੇਮਾਂ ਦੇ ਅੰਦਰ ਗਣਨਾਵਾਂ ਦੇ ਕਾਰਨ "ਲਚਕੀਲੇ" ਵਰਗੇ ਐਨੀਮੇਸ਼ਨ ਥੋੜ੍ਹੇ ਮੁਸ਼ਕਲ ਹਨ। ਸਾਨੂੰ --kf-elastic-from-X ਅਤੇ --kf-elastic-from-Y ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ (ਦੋਵੇਂ ਵਿਕਲਪਿਕ ਹਨ), ਅਤੇ ਇਕੱਠੇ ਉਹ ਸਾਨੂੰ ਸਕਰੀਨ ਦੇ ਕਿਸੇ ਵੀ ਬਿੰਦੂ ਤੋਂ ਇੱਕ ਲਚਕੀਲਾ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਬਣਾਉਣ ਦਿੰਦੇ ਹਨ।
/* * ਲਚਕੀਲੇ ਅੰਦਰ - ਲਚਕੀਲੇ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨ * ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ --kf-elastic-from-X ਅਤੇ --kf-elastic-from-Y ਦੀ ਵਰਤੋਂ ਕਰੋ * ਪੂਰਵ-ਨਿਰਧਾਰਤ: ਚੋਟੀ ਦੇ ਕੇਂਦਰ ਤੋਂ ਦਾਖਲ ਹੁੰਦਾ ਹੈ (0, -100vh) * ਵਰਤੋਂ: * ਐਨੀਮੇਸ਼ਨ: kf-elastic-in 2s ease-in-out both; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px, -200px) ਤੋਂ ਦਾਖਲ ਕਰੋ */
@keyframes kf-elastic-in { 0% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(-kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(-kf-elastic-from-Y, 0px) * 0.1312); }
44% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { ਅਨੁਵਾਦ ਕਰੋ: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { ਅਨੁਵਾਦ: 0 0; } }
ਇਹ ਪਹੁੰਚ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਉੱਨਤ ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਮੁੜ ਵਰਤੋਂ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ, ਸਿਰਫ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਬਦਲ ਕੇ।
.ਬਾਊਂਸ-ਐਂਡ-ਜ਼ੂਮ { ਐਨੀਮੇਸ਼ਨ: kf-ਬਾਊਂਸ 3s ਈਜ਼-ਇਨ, kf-ਜ਼ੂਮ 3s ਲੀਨੀਅਰ; --kf-ਜ਼ੂਮ-ਤੋਂ: 0; }
.ਉਛਾਲ-ਅਤੇ-ਸਲਾਈਡ { ਐਨੀਮੇਸ਼ਨ-ਰਚਨਾ: ਜੋੜੋ; /* ਦੋਵੇਂ ਐਨੀਮੇਸ਼ਨ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ */ ਐਨੀਮੇਸ਼ਨ: kf-ਬਾਊਂਸ 3s ਈਜ਼-ਇਨ, kf-ਸਲਾਈਡ-ਇਨ 3s ਈਜ਼-ਆਊਟ; --kf-slide-from: -200px; }
ਲਚਕੀਲੇ-ਵਿੱਚ { ਐਨੀਮੇਸ਼ਨ: kf-elastic-in 2s ease-in-out both; }
ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 7 [ਫੋਰਕਡ]। ਇਸ ਬਿੰਦੂ ਤੱਕ, ਅਸੀਂ ਦੇਖਿਆ ਹੈ ਕਿ ਅਸੀਂ ਇੱਕ ਸਮਾਰਟ ਅਤੇ ਕੁਸ਼ਲ ਤਰੀਕੇ ਨਾਲ ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਕਿਵੇਂ ਮਜ਼ਬੂਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਬੇਸ਼ੱਕ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ ਨੂੰ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਫਿੱਟ ਕਰਨ ਲਈ ਚੀਜ਼ਾਂ ਨੂੰ ਬਦਲਣਾ ਚਾਹ ਸਕਦੇ ਹੋ, ਪਰ ਅਸੀਂ ਕਈ ਆਮ ਐਨੀਮੇਸ਼ਨਾਂ ਅਤੇ ਰੋਜ਼ਾਨਾ ਵਰਤੋਂ ਦੇ ਮਾਮਲਿਆਂ ਦੀਆਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਕਵਰ ਕੀਤਾ ਹੈ। ਅਤੇ ਇਹਨਾਂ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਦੇ ਨਾਲ, ਸਾਡੇ ਕੋਲ ਹੁਣ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਇਕਸਾਰ, ਸਾਂਭਣਯੋਗ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਿਲਡਿੰਗ ਬਲਾਕ ਹਨ। ਕੋਈ ਹੋਰ ਡੁਪਲੀਕੇਟ ਕੀਫ੍ਰੇਮ ਨਹੀਂ, ਕੋਈ ਹੋਰ ਗਲੋਬਲ ਸਕੋਪ ਟਕਰਾਅ ਨਹੀਂ। ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਐਨੀਮੇਸ਼ਨ ਲੋੜਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਸਿਰਫ਼ ਇੱਕ ਸਾਫ਼, ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ। ਪਰ ਅਸਲ ਸਵਾਲ ਇਹ ਹੈ: ਅਸੀਂ ਇਹਨਾਂ ਬਿਲਡਿੰਗ ਬਲਾਕਾਂ ਨੂੰ ਇਕੱਠੇ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਾਂ? ਇਹ ਸਭ ਇਕੱਠੇ ਪਾ ਰਿਹਾ ਹੈ ਅਸੀਂ ਦੇਖਿਆ ਹੈ ਕਿ ਬੁਨਿਆਦੀ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਨੂੰ ਜੋੜਨਾ ਸਧਾਰਨ ਹੈ. ਸਾਨੂੰ ਕਿਸੇ ਖਾਸ ਚੀਜ਼ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ਪਰ ਪਹਿਲੀ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ, ਦੂਜੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ, ਲੋੜ ਅਨੁਸਾਰ ਵੇਰੀਏਬਲ ਸੈੱਟ ਕਰੋ, ਅਤੇ ਬੱਸ ਹੋ ਗਿਆ। /* ਫੇਡ ਇਨ + ਸਲਾਈਡ ਇਨ */ .ਟੋਸਟ { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.4s, kf-ਸਲਾਈਡ-ਇਨ 0.4s ਕਿਊਬਿਕ-ਬੇਜ਼ੀਅਰ(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* ਜ਼ੂਮ ਇਨ + ਫੇਡ ਇਨ */ .modal { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 0.3s, kf-ਜ਼ੂਮ 0.3s ਕਿਊਬਿਕ-ਬੇਜ਼ੀਅਰ(0.34, 1.56, 0.64, 1); --kf-ਜ਼ੂਮ-ਤੋਂ: 0.7; --kf-ਜ਼ੂਮ-ਟੂ: 1; }
/* ਸਲਾਈਡ ਇਨ + ਪਲਸ */ .ਸੂਚਨਾ { ਐਨੀਮੇਸ਼ਨ: kf-ਸਲਾਈਡ-ਇਨ 0.5s, kf-ਪਲਸ 1.2s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ ਵਿਕਲਪਕ; --kf-slide-from: -100px 0; --kf-ਪਲਸ-ਸਕੇਲ-ਤੋਂ: 0.95; --kf-ਪਲਸ-ਸਕੇਲ-ਟੂ: 1.05; }
ਇਹ ਸੰਜੋਗ ਸੁੰਦਰਤਾ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਹਰੇਕ ਐਨੀਮੇਸ਼ਨ ਇੱਕ ਵੱਖਰੀ ਸੰਪੱਤੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੀ ਹੈ: ਧੁੰਦਲਾਪਨ, ਪਰਿਵਰਤਨ (ਅਨੁਵਾਦ/ਸਕੇਲ), ਆਦਿ। ਪਰ ਕਈ ਵਾਰ ਵਿਵਾਦ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਸਾਨੂੰ ਇਹ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਕਿ ਉਹਨਾਂ ਨਾਲ ਕਿਉਂ ਅਤੇ ਕਿਵੇਂ ਨਜਿੱਠਣਾ ਹੈ। ਜਦੋਂ ਦੋ ਐਨੀਮੇਸ਼ਨਾਂ ਇੱਕੋ ਸੰਪਤੀ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੀਆਂ ਹਨ — ਉਦਾਹਰਨ ਲਈ, ਦੋਵੇਂ ਐਨੀਮੇਟ ਕਰਨ ਵਾਲੇ ਸਕੇਲ ਜਾਂ ਦੋਵੇਂ ਐਨੀਮੇਸ਼ਨ ਧੁੰਦਲਾਪਨ — ਨਤੀਜਾ ਉਹ ਨਹੀਂ ਹੋਵੇਗਾ ਜੋ ਤੁਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹੋ। ਮੂਲ ਰੂਪ ਵਿੱਚ, ਕੇਵਲ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਅਸਲ ਵਿੱਚ ਉਸ ਸੰਪੱਤੀ 'ਤੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ, ਜੋ ਕਿ ਐਨੀਮੇਸ਼ਨ ਸੂਚੀ ਵਿੱਚ ਆਖਰੀ ਹੈ। ਇਹ ਇੱਕ ਸੀਮਾ ਹੈ ਕਿ ਕਿਵੇਂ CSS ਇੱਕੋ ਸੰਪਤੀ 'ਤੇ ਕਈ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਇਹ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ ਕਿਉਂਕਿ ਸਿਰਫ਼ kf-pulse ਐਨੀਮੇਸ਼ਨ ਲਾਗੂ ਹੋਵੇਗੀ। .bad-combo { ਐਨੀਮੇਸ਼ਨ: kf-ਜ਼ੂਮ 0.5s ਅੱਗੇ, kf- ਪਲਸ 1.2s ਅਨੰਤ ਵਿਕਲਪਿਕ; --kf-ਜ਼ੂਮ-ਤੋਂ: 0.5; --kf-ਜ਼ੂਮ-ਟੂ: 1.2; --kf-ਪਲਸ-ਸਕੇਲ-ਤੋਂ: 0.8; --kf-ਪਲਸ-ਸਕੇਲ-ਟੂ: 1.1; }
ਐਨੀਮੇਸ਼ਨ ਐਡੀਸ਼ਨ ਇੱਕੋ ਸੰਪਤੀ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਵਾਲੇ ਮਲਟੀਪਲ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਸਭ ਤੋਂ ਸਰਲ ਅਤੇ ਸਭ ਤੋਂ ਸਿੱਧਾ ਤਰੀਕਾ ਹੈ ਐਨੀਮੇਸ਼ਨ-ਰਚਨਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਉੱਪਰ ਦਿੱਤੀ ਆਖਰੀ ਉਦਾਹਰਨ ਵਿੱਚ, kf-pulse ਐਨੀਮੇਸ਼ਨ kf-zoom ਐਨੀਮੇਸ਼ਨ ਦੀ ਥਾਂ ਲੈਂਦੀ ਹੈ, ਇਸਲਈ ਅਸੀਂ ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਨਹੀਂ ਦੇਖਾਂਗੇ ਅਤੇ 1.2 ਦਾ ਅਨੁਮਾਨਿਤ ਸਕੇਲ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕਰਾਂਗੇ। ਐਨੀਮੇਸ਼ਨ-ਰਚਨਾ ਨੂੰ ਜੋੜਨ ਲਈ ਸੈੱਟ ਕਰਕੇ, ਅਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੋਵੇਂ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਕਹਿੰਦੇ ਹਾਂ। ਇਹ ਸਾਨੂੰ ਉਹ ਨਤੀਜਾ ਦਿੰਦਾ ਹੈ ਜੋ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ। .component-ਦੋ { ਐਨੀਮੇਸ਼ਨ-ਰਚਨਾ: ਜੋੜੋ; }
ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 8 [ਫੋਰਕਡ]। ਇਹ ਪਹੁੰਚ ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦੀ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਇੱਕੋ ਸੰਪਤੀ 'ਤੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹਾਂ। ਇਹ ਉਦੋਂ ਵੀ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸਾਨੂੰ ਸਥਿਰ ਸੰਪਤੀ ਮੁੱਲਾਂ ਨਾਲ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਸਾਡੇ ਕੋਲ ਇੱਕ ਅਜਿਹਾ ਤੱਤ ਹੈ ਜੋ ਅਨੁਵਾਦ ਸੰਪੱਤੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਇਸ ਨੂੰ ਬਿਲਕੁਲ ਉਸੇ ਥਾਂ 'ਤੇ ਰੱਖ ਸਕੀਏ, ਅਤੇ ਫਿਰ ਅਸੀਂ ਇਸਨੂੰ kf-slide-in ਕੀਫ੍ਰੇਮ ਨਾਲ ਐਨੀਮੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਸਾਨੂੰ ਐਨੀਮੇਸ਼ਨ-ਰਚਨਾ ਤੋਂ ਬਿਨਾਂ ਇੱਕ ਗੰਦੀ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀ ਛਾਲ ਮਿਲਦੀ ਹੈ। ਪੈੱਨ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 9 [ਫੋਰਕਡ]। ਐਨੀਮੇਸ਼ਨ-ਰਚਨਾ ਨੂੰ ਜੋੜਨ ਲਈ ਸੈੱਟ ਦੇ ਨਾਲ, ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਮੌਜੂਦਾ ਨਾਲ ਸੁਚਾਰੂ ਰੂਪ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈਪਰਿਵਰਤਿਤ ਕਰੋ, ਇਸ ਲਈ ਤੱਤ ਜਗ੍ਹਾ 'ਤੇ ਰਹਿੰਦਾ ਹੈ ਅਤੇ ਉਮੀਦ ਅਨੁਸਾਰ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ। ਐਨੀਮੇਸ਼ਨ ਸਟੈਗਰ ਮਲਟੀਪਲ ਐਨੀਮੇਸ਼ਨਾਂ ਨਾਲ ਨਜਿੱਠਣ ਦਾ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਹੈ ਉਹਨਾਂ ਨੂੰ "ਡੰਬਰ" ਕਰਨਾ — ਭਾਵ, ਪਹਿਲੀ ਐਨੀਮੇਸ਼ਨ ਖਤਮ ਹੋਣ ਤੋਂ ਥੋੜ੍ਹੀ ਦੇਰ ਬਾਅਦ ਦੂਜੀ ਐਨੀਮੇਸ਼ਨ ਸ਼ੁਰੂ ਕਰੋ। ਇਹ ਇੱਕ ਅਜਿਹਾ ਹੱਲ ਨਹੀਂ ਹੈ ਜੋ ਹਰ ਕੇਸ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਉਦੋਂ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇੱਕ ਪ੍ਰਵੇਸ਼ ਐਨੀਮੇਸ਼ਨ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇੱਕ ਨਿਰੰਤਰ ਐਨੀਮੇਸ਼ਨ ਹੁੰਦਾ ਹੈ। /* ਫੇਡ ਇਨ + ਓਪੇਸਿਟੀ ਪਲਸ */ .ਸੂਚਨਾ { ਐਨੀਮੇਸ਼ਨ: kf-fade-in 2s ਈਜ਼-ਆਊਟ, kf-ਪਲਸ 0.5s 2s ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ ਵਿਕਲਪਕ; --kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ: 0.5; }
ਪੈੱਨ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 10 [ਫੋਰਕਡ]। ਆਰਡਰ ਮਾਮਲੇ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਇੱਕ ਵੱਡਾ ਹਿੱਸਾ ਜਿਸ ਨਾਲ ਅਸੀਂ ਕੰਮ ਕਰਦੇ ਹਾਂ ਟ੍ਰਾਂਸਫਾਰਮ ਸੰਪਤੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਇਹ ਸਿਰਫ਼ ਵਧੇਰੇ ਸੁਵਿਧਾਜਨਕ ਹੈ. ਇਸਦਾ ਪ੍ਰਦਰਸ਼ਨ ਲਾਭ ਵੀ ਹੈ ਕਿਉਂਕਿ ਟ੍ਰਾਂਸਫਾਰਮ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ GPU-ਐਕਸਲਰੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਪਰ ਜੇਕਰ ਅਸੀਂ ਪਰਿਵਰਤਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਸਾਨੂੰ ਇਹ ਸਵੀਕਾਰ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਕਿ ਜਿਸ ਕ੍ਰਮ ਵਿੱਚ ਅਸੀਂ ਆਪਣੇ ਪਰਿਵਰਤਨ ਕਰਦੇ ਹਾਂ ਮਾਇਨੇ ਰੱਖਦੇ ਹਾਂ। ਬਹੁਤ ਕੁਝ। ਸਾਡੇ ਕੀਫ੍ਰੇਮਾਂ ਵਿੱਚ ਹੁਣ ਤੱਕ, ਅਸੀਂ ਵਿਅਕਤੀਗਤ ਰੂਪਾਂਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਸਪੈਕਸ ਦੇ ਅਨੁਸਾਰ, ਇਹ ਹਮੇਸ਼ਾ ਇੱਕ ਨਿਸ਼ਚਿਤ ਕ੍ਰਮ ਵਿੱਚ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ: ਪਹਿਲਾਂ, ਤੱਤ ਅਨੁਵਾਦ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਫਿਰ ਘੁੰਮਾਓ, ਫਿਰ ਸਕੇਲ। ਇਹ ਅਰਥ ਰੱਖਦਾ ਹੈ ਅਤੇ ਉਹੀ ਹੈ ਜੋ ਸਾਡੇ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਉਮੀਦ ਕਰਦੇ ਹਨ। ਹਾਲਾਂਕਿ, ਜੇਕਰ ਅਸੀਂ ਪਰਿਵਰਤਨ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਫੰਕਸ਼ਨ ਜਿਸ ਕ੍ਰਮ ਵਿੱਚ ਲਿਖੇ ਗਏ ਹਨ ਉਹ ਕ੍ਰਮ ਹੈ ਜਿਸ ਵਿੱਚ ਉਹ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਜੇਕਰ ਅਸੀਂ X-ਧੁਰੇ 'ਤੇ 100 ਪਿਕਸਲ ਕਿਸੇ ਚੀਜ਼ ਨੂੰ ਹਿਲਾਉਂਦੇ ਹਾਂ ਅਤੇ ਫਿਰ ਇਸਨੂੰ 45 ਡਿਗਰੀ ਦੁਆਰਾ ਘੁੰਮਾਉਂਦੇ ਹਾਂ, ਤਾਂ ਇਹ ਪਹਿਲਾਂ ਇਸਨੂੰ 45 ਡਿਗਰੀ ਦੁਆਰਾ ਘੁੰਮਾਉਣ ਅਤੇ ਫਿਰ ਇਸਨੂੰ 100 ਪਿਕਸਲ ਘੁਮਾਉਣ ਵਰਗਾ ਨਹੀਂ ਹੈ। /* ਗੁਲਾਬੀ ਵਰਗ: ਪਹਿਲਾਂ ਅਨੁਵਾਦ ਕਰੋ, ਫਿਰ ਘੁੰਮਾਓ */ .ਉਦਾਹਰਨ-ਇੱਕ { ਟ੍ਰਾਂਸਫਾਰਮ: translateX(100px) ਰੋਟੇਟ (45deg); }
/* ਹਰਾ ਵਰਗ: ਪਹਿਲਾਂ ਘੁੰਮਾਓ, ਫਿਰ ਅਨੁਵਾਦ ਕਰੋ */ .ਉਦਾਹਰਨ-ਦੋ { ਟ੍ਰਾਂਸਫਾਰਮ: ਘੁੰਮਾਓ(45deg) translateX(100px); }
ਪੈੱਨ ਕੀਫ੍ਰੇਮਜ਼ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 11 [ਫੋਰਕਡ]। ਪਰ ਟ੍ਰਾਂਸਫਾਰਮ ਆਰਡਰ ਦੇ ਅਨੁਸਾਰ, ਸਾਰੇ ਵਿਅਕਤੀਗਤ ਰੂਪਾਂਤਰ — ਉਹ ਸਭ ਕੁਝ ਜੋ ਅਸੀਂ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਲਈ ਵਰਤਿਆ ਹੈ — ਟ੍ਰਾਂਸਫਾਰਮ ਫੰਕਸ਼ਨਾਂ ਤੋਂ ਪਹਿਲਾਂ ਵਾਪਰਦਾ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਜੋ ਵੀ ਟ੍ਰਾਂਸਫਾਰਮ ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਸੈਟ ਕਰਦੇ ਹੋ ਉਹ ਐਨੀਮੇਸ਼ਨ ਤੋਂ ਬਾਅਦ ਹੋਵੇਗਾ। ਪਰ ਜੇਕਰ ਤੁਸੀਂ, ਉਦਾਹਰਨ ਲਈ, kf-ਸਪਿਨ ਕੀਫ੍ਰੇਮ ਦੇ ਨਾਲ ਅਨੁਵਾਦ ਸੈੱਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਅਨੁਵਾਦ ਐਨੀਮੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਹੋਵੇਗਾ। ਅਜੇ ਵੀ ਉਲਝਣ?! ਇਹ ਉਹਨਾਂ ਸਥਿਤੀਆਂ ਵੱਲ ਲੈ ਜਾਂਦਾ ਹੈ ਜਿੱਥੇ ਸਥਿਰ ਮੁੱਲ ਇੱਕੋ ਐਨੀਮੇਸ਼ਨ ਲਈ ਵੱਖਰੇ ਨਤੀਜੇ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤੇ ਕੇਸ ਵਿੱਚ:
/* ਦੋਨਾਂ ਸਪਿਨਰਾਂ ਲਈ ਆਮ ਐਨੀਮੇਸ਼ਨ */ .ਸਪਿਨਰ { ਐਨੀਮੇਸ਼ਨ: kf-spin 1s ਲੀਨੀਅਰ ਅਨੰਤ; }
/* ਪਿੰਕ ਸਪਿਨਰ: ਘੁੰਮਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਅਨੁਵਾਦ ਕਰੋ (ਵਿਅਕਤੀਗਤ ਰੂਪਾਂਤਰਣ) */ .ਸਪਿਨਰ-ਗੁਲਾਬੀ { ਅਨੁਵਾਦ: 100% 50%; }
/* ਗ੍ਰੀਨ ਸਪਿਨਰ: ਘੁੰਮਾਓ ਫਿਰ ਅਨੁਵਾਦ ਕਰੋ (ਫੰਕਸ਼ਨ ਆਰਡਰ) */ .ਸਪਿਨਰ-ਹਰਾ { ਪਰਿਵਰਤਨ: ਅਨੁਵਾਦ (100%, 50%); }
ਪੈੱਨ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਦੇਖੋ - ਅਮਿਤ ਸ਼ੀਨ ਦੁਆਰਾ ਡੈਮੋ 12 [ਫੋਰਕਡ]। ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਪਹਿਲੇ ਸਪਿਨਰ (ਗੁਲਾਬੀ) ਨੂੰ ਇੱਕ ਅਨੁਵਾਦ ਮਿਲਦਾ ਹੈ ਜੋ kf-ਸਪਿਨ ਦੇ ਰੋਟੇਟ ਤੋਂ ਪਹਿਲਾਂ ਹੁੰਦਾ ਹੈ, ਇਸਲਈ ਇਹ ਪਹਿਲਾਂ ਆਪਣੀ ਥਾਂ ਤੇ ਜਾਂਦਾ ਹੈ ਅਤੇ ਫਿਰ ਸਪਿਨ ਕਰਦਾ ਹੈ। ਦੂਜਾ ਸਪਿਨਰ (ਹਰਾ) ਇੱਕ translate() ਫੰਕਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਜੋ ਵਿਅਕਤੀਗਤ ਰੂਪਾਂਤਰਣ ਤੋਂ ਬਾਅਦ ਵਾਪਰਦਾ ਹੈ, ਇਸਲਈ ਤੱਤ ਪਹਿਲਾਂ ਘੁੰਮਦਾ ਹੈ, ਫਿਰ ਇਸਦੇ ਮੌਜੂਦਾ ਕੋਣ ਦੇ ਅਨੁਸਾਰੀ ਚਲਦਾ ਹੈ, ਅਤੇ ਸਾਨੂੰ ਉਹ ਵਿਆਪਕ ਔਰਬਿਟ ਪ੍ਰਭਾਵ ਮਿਲਦਾ ਹੈ। ਨਹੀਂ, ਇਹ ਕੋਈ ਬੱਗ ਨਹੀਂ ਹੈ। ਇਹ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜੋ ਸਾਨੂੰ CSS ਬਾਰੇ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਮਲਟੀਪਲ ਐਨੀਮੇਸ਼ਨਾਂ ਜਾਂ ਮਲਟੀਪਲ ਟ੍ਰਾਂਸਫਾਰਮਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ। ਜੇਕਰ ਲੋੜ ਹੋਵੇ, ਤਾਂ ਤੁਸੀਂ kf-spin-alt ਕੀਫ੍ਰੇਮਾਂ ਦਾ ਇੱਕ ਵਾਧੂ ਸੈੱਟ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ rotate() ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਤੱਤਾਂ ਨੂੰ ਘੁੰਮਾਉਂਦੇ ਹਨ। ਘਟੀ ਹੋਈ ਗਤੀ ਅਤੇ ਜਦੋਂ ਅਸੀਂ ਵਿਕਲਪਕ ਕੀਫ੍ਰੇਮਾਂ ਬਾਰੇ ਗੱਲ ਕਰ ਰਹੇ ਹਾਂ, ਅਸੀਂ "ਕੋਈ ਐਨੀਮੇਸ਼ਨ ਨਹੀਂ" ਵਿਕਲਪ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵੱਡਾ ਫਾਇਦਾ ਇਹ ਹੈ ਕਿ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਬੇਕ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਅਤੇ ਇਹ ਅਸਲ ਵਿੱਚ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਹੈ। ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ ਸਾਡੇ ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਕੇ, ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹਾਂ ਕਿ ਘੱਟ ਗਤੀ ਨੂੰ ਤਰਜੀਹ ਦੇਣ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਾਧੂ ਕੰਮ ਜਾਂ ਕੋਡ ਡੁਪਲੀਕੇਸ਼ਨ ਤੋਂ ਬਿਨਾਂ, ਇੱਕ ਨਿਰਵਿਘਨ, ਘੱਟ ਧਿਆਨ ਭਟਕਾਉਣ ਵਾਲਾ ਅਨੁਭਵ ਮਿਲਦਾ ਹੈ। "ਰਿਡਿਊਸਡ ਮੋਸ਼ਨ" ਦਾ ਸਹੀ ਅਰਥ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਤੋਂ ਦੂਜੇ ਵਿੱਚ, ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਤੋਂ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਥੋੜਾ ਬਦਲ ਸਕਦਾ ਹੈ, ਪਰ ਇੱਥੇ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣ ਲਈ ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਨੁਕਤੇ ਹਨ: ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਮਿਊਟ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ ਹਾਲਾਂਕਿ ਕੁਝ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਨਰਮ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਾਂ ਹੌਲੀ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਕੁਝ ਹੋਰ ਵੀ ਹਨ ਜੋ ਘੱਟ ਗਤੀ ਦੀ ਬੇਨਤੀ ਕਰਨ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਲੋਪ ਹੋ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਪਲਸ ਐਨੀਮੇਸ਼ਨ ਇੱਕ ਵਧੀਆ ਉਦਾਹਰਣ ਹਨ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਇਹ ਐਨੀਮੇਸ਼ਨ ਘਟੇ ਹੋਏ ਮੋਸ਼ਨ ਮੋਡ ਵਿੱਚ ਨਹੀਂ ਚੱਲਦੇ, ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਢੁਕਵੀਂ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਵਿੱਚ ਲਪੇਟ ਸਕਦੇ ਹਾਂ।
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { ਤੋਂ { ਸਕੇਲ: var(--kf-pulse-scale-from, 1); ਧੁੰਦਲਾਪਨ: var(--kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਤੋਂ, 1); } ਨੂੰ { ਸਕੇਲ: var(-kf-pulse-scale-to, 1); ਧੁੰਦਲਾਪਨ:var(--kf-ਪਲਸ-ਓਪੈਸਿਟੀ-ਨੂੰ, 1); } } }
ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਜਿਨ੍ਹਾਂ ਉਪਭੋਗਤਾਵਾਂ ਨੇ ਘੱਟ ਕਰਨ ਲਈ ਤਰਜੀਹਾਂ-ਘਟਾਉਣ-ਮੋਸ਼ਨ ਸੈੱਟ ਕੀਤੀ ਹੈ, ਉਹ ਐਨੀਮੇਸ਼ਨ ਨਹੀਂ ਦੇਖ ਸਕਣਗੇ ਅਤੇ ਉਹਨਾਂ ਦੀ ਤਰਜੀਹ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਅਨੁਭਵ ਪ੍ਰਾਪਤ ਕਰਨਗੇ। ਇੰਸਟੈਂਟ ਇਨ ਕੁਝ ਕੀਫ੍ਰੇਮ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਸਿਰਫ਼ ਹਟਾ ਨਹੀਂ ਸਕਦੇ, ਜਿਵੇਂ ਕਿ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਐਨੀਮੇਸ਼ਨ। ਮੁੱਲ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ, ਐਨੀਮੇਟ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ; ਨਹੀਂ ਤਾਂ, ਤੱਤ ਦੇ ਸਹੀ ਮੁੱਲ ਨਹੀਂ ਹੋਣਗੇ। ਪਰ ਘਟੀ ਹੋਈ ਗਤੀ ਵਿੱਚ, ਸ਼ੁਰੂਆਤੀ ਮੁੱਲ ਤੋਂ ਇਹ ਤਬਦੀਲੀ ਤੁਰੰਤ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਇਸ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਅਸੀਂ ਕੀਫ੍ਰੇਮਾਂ ਦੇ ਇੱਕ ਵਾਧੂ ਸੈੱਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਾਂਗੇ ਜਿੱਥੇ ਮੁੱਲ ਤੁਰੰਤ ਅੰਤ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਛਾਲ ਮਾਰਦਾ ਹੈ। ਇਹ ਸਾਡੇ ਡਿਫੌਲਟ ਕੀਫ੍ਰੇਮ ਬਣ ਜਾਂਦੇ ਹਨ। ਫਿਰ, ਅਸੀਂ ਪ੍ਰੈਫਰਸ-ਰਿਡਿਊਸਡ-ਮੋਸ਼ਨ ਲਈ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਦੇ ਅੰਦਰ ਰੈਗੂਲਰ ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਬਿਨਾਂ ਤਰਜੀਹ 'ਤੇ ਸੈੱਟ ਕਰਾਂਗੇ, ਜਿਵੇਂ ਕਿ ਪਿਛਲੀ ਉਦਾਹਰਨ ਵਿੱਚ। /* ਘਟੀ ਹੋਈ ਗਤੀ ਲਈ ਤੁਰੰਤ ਪੌਪ ਇਨ ਕਰੋ */ @keyframes kf-ਜ਼ੂਮ { ਤੋਂ, { ਤੱਕ ਸਕੇਲ: var(--kf-ਜ਼ੂਮ-ਟੂ, 1); } }
@media (prefers-reduced-motion: no-preference) { /* ਅਸਲੀ ਜ਼ੂਮ ਕੀਫ੍ਰੇਮ */ @keyframes kf-ਜ਼ੂਮ { ਤੋਂ { ਸਕੇਲ: var(-kf-ਜ਼ੂਮ-ਤੋਂ, 0.8); } ਨੂੰ { ਸਕੇਲ: var(--kf-ਜ਼ੂਮ-ਟੂ, 1); } } }
ਇਸ ਤਰ੍ਹਾਂ, ਉਪਭੋਗਤਾ ਜੋ ਘਟੀ ਹੋਈ ਗਤੀ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ ਉਹ ਤੱਤ ਨੂੰ ਆਪਣੀ ਅੰਤਿਮ ਸਥਿਤੀ ਵਿੱਚ ਤੁਰੰਤ ਦਿਖਾਈ ਦੇਣਗੇ, ਜਦੋਂ ਕਿ ਹਰ ਕੋਈ ਐਨੀਮੇਟਿਡ ਤਬਦੀਲੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਨਰਮ ਪਹੁੰਚ ਅਜਿਹੇ ਮਾਮਲੇ ਹਨ ਜਿੱਥੇ ਅਸੀਂ ਕੁਝ ਅੰਦੋਲਨ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਪਰ ਅਸਲ ਐਨੀਮੇਸ਼ਨ ਨਾਲੋਂ ਬਹੁਤ ਨਰਮ ਅਤੇ ਸ਼ਾਂਤ। ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਇੱਕ ਉਛਾਲ ਦੇ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਨੂੰ ਇੱਕ ਕੋਮਲ ਫੇਡ-ਇਨ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹਾਂ।
@keyframes kf-ਬਾਊਂਸ { /* ਘੱਟ ਗਤੀ ਲਈ ਨਰਮ ਫੇਡ-ਇਨ */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-ਬਾਊਂਸ { /* ਮੂਲ ਬਾਊਂਸ ਕੀਫ੍ਰੇਮ */ } }
ਹੁਣ, ਘੱਟ ਗਤੀ ਸਮਰਥਿਤ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਅਜੇ ਵੀ ਦਿੱਖ ਦੀ ਭਾਵਨਾ ਮਿਲਦੀ ਹੈ, ਪਰ ਇੱਕ ਉਛਾਲ ਜਾਂ ਲਚਕੀਲੇ ਐਨੀਮੇਸ਼ਨ ਦੀ ਤੀਬਰ ਗਤੀ ਦੇ ਬਿਨਾਂ। ਬਿਲਡਿੰਗ ਬਲਾਕਾਂ ਦੇ ਨਾਲ, ਅਗਲਾ ਸਵਾਲ ਇਹ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਅਸਲ ਵਰਕਫਲੋ ਦਾ ਹਿੱਸਾ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ। ਲਚਕਦਾਰ ਕੀਫ੍ਰੇਮ ਲਿਖਣਾ ਇੱਕ ਚੀਜ਼ ਹੈ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਭਰੋਸੇਮੰਦ ਬਣਾਉਣ ਲਈ ਕੁਝ ਰਣਨੀਤੀਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਮੈਨੂੰ ਸਖਤ ਤਰੀਕੇ ਨਾਲ ਸਿੱਖਣੀ ਪਈ। ਲਾਗੂ ਕਰਨ ਦੀਆਂ ਰਣਨੀਤੀਆਂ ਅਤੇ ਵਧੀਆ ਅਭਿਆਸ ਇੱਕ ਵਾਰ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਦੀ ਇੱਕ ਠੋਸ ਲਾਇਬ੍ਰੇਰੀ ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਅਸਲ ਚੁਣੌਤੀ ਇਹ ਹੁੰਦੀ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਰੋਜ਼ਾਨਾ ਦੇ ਕੰਮ ਵਿੱਚ ਕਿਵੇਂ ਲਿਆਂਦਾ ਜਾਵੇ।
ਪਰਤਾਵੇ ਵਿੱਚ ਸਾਰੇ ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਸੁੱਟਣਾ ਅਤੇ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਘੋਸ਼ਿਤ ਕਰਨਾ ਹੈ, ਪਰ ਅਭਿਆਸ ਵਿੱਚ ਮੈਂ ਪਾਇਆ ਹੈ ਕਿ ਸਭ ਤੋਂ ਵਧੀਆ ਨਤੀਜੇ ਹੌਲੀ-ਹੌਲੀ ਗੋਦ ਲੈਣ ਤੋਂ ਆਉਂਦੇ ਹਨ। ਸਭ ਤੋਂ ਆਮ ਐਨੀਮੇਸ਼ਨਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਫੇਡ ਜਾਂ ਸਲਾਈਡ। ਇਹ ਆਸਾਨ ਜਿੱਤਾਂ ਹਨ ਜੋ ਵੱਡੇ ਮੁੜ-ਲਿਖਣ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਤੁਰੰਤ ਮੁੱਲ ਦਿਖਾਉਂਦੀਆਂ ਹਨ। ਨਾਮਕਰਨ ਇਕ ਹੋਰ ਨੁਕਤਾ ਹੈ ਜੋ ਧਿਆਨ ਦੇਣ ਯੋਗ ਹੈ। ਇਕਸਾਰ ਅਗੇਤਰ ਜਾਂ ਨੇਮਸਪੇਸ ਇਹ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜੀਆਂ ਐਨੀਮੇਸ਼ਨਾਂ ਟੋਕਨ ਹਨ ਅਤੇ ਕਿਹੜੀਆਂ ਸਥਾਨਕ ਇਕ-ਆਫ ਹਨ। ਇਹ ਦੁਰਘਟਨਾ ਨਾਲ ਹੋਣ ਵਾਲੀਆਂ ਟੱਕਰਾਂ ਨੂੰ ਵੀ ਰੋਕਦਾ ਹੈ ਅਤੇ ਟੀਮ ਦੇ ਨਵੇਂ ਮੈਂਬਰਾਂ ਨੂੰ ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਸਾਂਝੇ ਸਿਸਟਮ ਨੂੰ ਪਛਾਣਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਓਨਾ ਹੀ ਮਹੱਤਵਪੂਰਨ ਹੈ ਜਿੰਨਾ ਕੋਡ ਆਪਣੇ ਆਪ ਵਿੱਚ। ਇੱਥੋਂ ਤੱਕ ਕਿ ਹਰੇਕ ਕੀਫ੍ਰੇਮ ਟੋਕਨ ਦੇ ਉੱਪਰ ਇੱਕ ਛੋਟੀ ਟਿੱਪਣੀ ਬਾਅਦ ਵਿੱਚ ਅਨੁਮਾਨ ਲਗਾਉਣ ਦੇ ਘੰਟਿਆਂ ਨੂੰ ਬਚਾ ਸਕਦੀ ਹੈ। ਇੱਕ ਡਿਵੈਲਪਰ ਨੂੰ ਟੋਕਨ ਫਾਈਲ ਖੋਲ੍ਹਣ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੇ ਪ੍ਰਭਾਵ ਲਈ ਸਕੈਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਵਰਤੋਂ ਪੈਟਰਨ ਨੂੰ ਸਿੱਧੇ ਉਹਨਾਂ ਦੇ ਹਿੱਸੇ ਵਿੱਚ ਕਾਪੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਲਚਕਤਾ ਉਹ ਹੈ ਜੋ ਇਸ ਪਹੁੰਚ ਨੂੰ ਕੋਸ਼ਿਸ਼ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ। ਸਮਝਦਾਰ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਕੇ, ਅਸੀਂ ਸਿਸਟਮ ਨੂੰ ਤੋੜੇ ਬਿਨਾਂ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਟੀਮਾਂ ਨੂੰ ਕਮਰਾ ਦਿੰਦੇ ਹਾਂ। ਉਸੇ ਸਮੇਂ, ਜ਼ਿਆਦਾ ਗੁੰਝਲਦਾਰ ਨਾ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਮਹੱਤਵਪੂਰਨ ਗੰਢਾਂ ਪ੍ਰਦਾਨ ਕਰੋ ਅਤੇ ਬਾਕੀ ਦੀ ਰਾਏ ਰੱਖੋ। ਅੰਤ ਵਿੱਚ, ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਯਾਦ ਰੱਖੋ। ਹਰ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਘੱਟ ਮੋਸ਼ਨ ਵਿਕਲਪ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ, ਪਰ ਬਹੁਤ ਸਾਰੇ ਕਰਦੇ ਹਨ। ਇਹਨਾਂ ਐਡਜਸਟਮੈਂਟਾਂ ਵਿੱਚ ਜਲਦੀ ਪਕਾਉਣ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਾਨੂੰ ਕਦੇ ਵੀ ਉਹਨਾਂ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਦੁਬਾਰਾ ਤਿਆਰ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਅਤੇ ਇਹ ਦੇਖਭਾਲ ਦਾ ਇੱਕ ਪੱਧਰ ਦਿਖਾਉਂਦਾ ਹੈ ਜੋ ਸਾਡੇ ਉਪਭੋਗਤਾ ਧਿਆਨ ਦੇਣਗੇ ਭਾਵੇਂ ਉਹ ਇਸਦਾ ਜ਼ਿਕਰ ਕਦੇ ਵੀ ਨਹੀਂ ਕਰਨਗੇ।
ਮੇਰੇ ਤਜ਼ਰਬੇ ਵਿੱਚ, ਸਾਡੇ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਵਰਕਫਲੋ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਦਾ ਇਲਾਜ ਕਰਨਾ ਉਹਨਾਂ ਨੂੰ ਚਿਪਕਦਾ ਹੈ। ਇੱਕ ਵਾਰ ਜਦੋਂ ਉਹ ਸਥਾਨ 'ਤੇ ਆ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਉਹ ਵਿਸ਼ੇਸ਼ ਪ੍ਰਭਾਵਾਂ ਦੀ ਤਰ੍ਹਾਂ ਮਹਿਸੂਸ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹਨ ਅਤੇ ਡਿਜ਼ਾਈਨ ਭਾਸ਼ਾ ਦਾ ਹਿੱਸਾ ਬਣ ਜਾਂਦੇ ਹਨ, ਇਹ ਇੱਕ ਕੁਦਰਤੀ ਵਿਸਥਾਰ ਹੈ ਕਿ ਉਤਪਾਦ ਕਿਵੇਂ ਚਲਦਾ ਹੈ ਅਤੇ ਜਵਾਬ ਦਿੰਦਾ ਹੈ। ਲਪੇਟਣਾ ਐਨੀਮੇਸ਼ਨ ਬਿਲਡਿੰਗ ਇੰਟਰਫੇਸ ਦੇ ਸਭ ਤੋਂ ਅਨੰਦਦਾਇਕ ਹਿੱਸਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੋ ਸਕਦੀ ਹੈ, ਪਰ ਬਣਤਰ ਦੇ ਬਿਨਾਂ, ਉਹ ਨਿਰਾਸ਼ਾ ਦੇ ਸਭ ਤੋਂ ਵੱਡੇ ਸਰੋਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਬਣ ਸਕਦੇ ਹਨ। ਕੀਫ੍ਰੇਮਾਂ ਨੂੰ ਟੋਕਨਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤ ਕੇ, ਤੁਸੀਂ ਕੁਝ ਅਜਿਹਾ ਲੈਂਦੇ ਹੋ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਗੜਬੜ ਅਤੇ ਪ੍ਰਬੰਧਨ ਲਈ ਔਖਾ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਸਪਸ਼ਟ, ਅਨੁਮਾਨ ਲਗਾਉਣ ਯੋਗ ਸਿਸਟਮ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਅਸਲ ਮੁੱਲ ਸਿਰਫ ਕੋਡ ਦੀਆਂ ਕੁਝ ਲਾਈਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨ ਵਿੱਚ ਨਹੀਂ ਹੈ। ਇਹ ਭਰੋਸੇ ਵਿੱਚ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਫੇਡ, ਸਲਾਈਡ, ਜ਼ੂਮ, ਜਾਂ ਸਪਿਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਬਿਲਕੁਲ ਜਾਣਦੇ ਹੋ ਕਿ ਇਹ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਿਵੇਂ ਵਿਵਹਾਰ ਕਰੇਗਾ। ਇਹ ਲਚਕਤਾ ਵਿੱਚ ਹੈ ਜੋ ਬੇਅੰਤ ਭਿੰਨਤਾਵਾਂ ਦੀ ਹਫੜਾ-ਦਫੜੀ ਤੋਂ ਬਿਨਾਂ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੋਂ ਮਿਲਦੀ ਹੈ। ਅਤੇ ਇਹ ਫਾਊਂਡੇਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣ ਦੀ ਬਜਾਏ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਹੈਇੱਕ ਬਾਅਦ ਦੀ ਸੋਚ. ਮੈਂ ਇਹਨਾਂ ਵਿਚਾਰਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਟੀਮਾਂ ਅਤੇ ਵੱਖ-ਵੱਖ ਕੋਡਬੇਸਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਦੇਖਿਆ ਹੈ, ਅਤੇ ਪੈਟਰਨ ਹਮੇਸ਼ਾ ਇੱਕੋ ਜਿਹਾ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਵਾਰ ਟੋਕਨਾਂ ਦੇ ਸਥਾਨ 'ਤੇ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਕੀਫ੍ਰੇਮ ਚਾਲ ਦਾ ਇੱਕ ਖਿੰਡੇ ਹੋਏ ਸੰਗ੍ਰਹਿ ਬਣਨਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹਨ ਅਤੇ ਡਿਜ਼ਾਈਨ ਭਾਸ਼ਾ ਦਾ ਹਿੱਸਾ ਬਣ ਜਾਂਦੇ ਹਨ। ਉਹ ਉਤਪਾਦ ਨੂੰ ਵਧੇਰੇ ਜਾਣਬੁੱਝ ਕੇ, ਵਧੇਰੇ ਇਕਸਾਰ, ਅਤੇ ਵਧੇਰੇ ਜੀਵਿਤ ਮਹਿਸੂਸ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਲੇਖ ਵਿੱਚੋਂ ਇੱਕ ਚੀਜ਼ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਇਹ ਰਹਿਣ ਦਿਓ: ਐਨੀਮੇਸ਼ਨ ਉਸੇ ਦੇਖਭਾਲ ਅਤੇ ਢਾਂਚੇ ਦੇ ਹੱਕਦਾਰ ਹਨ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਰੰਗਾਂ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਸਪੇਸਿੰਗ ਨੂੰ ਦਿੰਦੇ ਹਾਂ। ਕੀਫ੍ਰੇਮ ਟੋਕਨਾਂ ਵਿੱਚ ਇੱਕ ਛੋਟਾ ਨਿਵੇਸ਼ ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ ਇੰਟਰਫੇਸ ਚਲਦਾ ਹੈ ਤਾਂ ਭੁਗਤਾਨ ਕਰਦਾ ਹੈ।
