Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2018, 12:18
Интересующийся
Отправить личное сообщение для drakonolom Посмотреть профиль Найти все сообщения от drakonolom
 
Регистрация: 03.07.2018
Сообщений: 26

Pie анимация с картинкой
Всем привет! Думаю как сделать вот эту анимацию :https://css-tricks.com/css-pie-timer/ но чтоб вместо синего цвета была картинка которая будет постепенно открыватся за счет этой же анимации?
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2018, 21:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Одна картинка, одна анимация, два свойства...
<img src="https://placeimg.com/300/300/animals">
<style>
img {
  border-radius: 50%;
  animation: 10s pie infinite linear;
}

@keyframes pie {
    0% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
    }

    25% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
        clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
    }

    50% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
        clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
    }

    75% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
        clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
    }

    100% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
    }
}
</style>

Этого достаточно!

#funfact Анимация была сгенерирована при помощи скрипта
var r = 50;
var R = 3 * r;

var getPoint = (p, k, t) => `${
    Math.round(R * Math.cos((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}% ${
    Math.round(R * Math.sin((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}%`;

var getKeyframe = (k, t) => `polygon(${getPoint(0, k, t)}, 50% 50%, ${[3, 2, 1].map(p => getPoint(p, k, t)).join(", ")})`;

var getKeyframes = t => k => `
    ${Math.round(100 / t * k)}% {
        -webkit-clip-path: ${getKeyframe(k, t)};
        clip-path: ${getKeyframe(k, t)};
    }`;
    
var rule = t => `@keyframes pie {${Array.from(Array(t + 1), (_, i) => i).map(getKeyframes(t)).join("\n")}\n}`;
console.log(rule(4));


Но перед этим были построены точки desmos.com/calculator/z1xftsuv7u
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2018, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Malleys,
здорово ...
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2018, 15:24
Интересующийся
Отправить личное сообщение для drakonolom Посмотреть профиль Найти все сообщения от drakonolom
 
Регистрация: 03.07.2018
Сообщений: 26

Сообщение от Malleys Посмотреть сообщение
Одна картинка, одна анимация, два свойства...
<img src="https://placeimg.com/300/300/animals">
<style>
img {
  border-radius: 50%;
  animation: 10s pie infinite linear;
}

@keyframes pie {
    0% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
    }

    25% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
        clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
    }

    50% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
        clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
    }

    75% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
        clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
    }

    100% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
    }
}
</style>

Этого достаточно!

#funfact Анимация была сгенерирована при помощи скрипта
var r = 50;
var R = 3 * r;

var getPoint = (p, k, t) => `${
    Math.round(R * Math.cos((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}% ${
    Math.round(R * Math.sin((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}%`;

var getKeyframe = (k, t) => `polygon(${getPoint(0, k, t)}, 50% 50%, ${[3, 2, 1].map(p => getPoint(p, k, t)).join(", ")})`;

var getKeyframes = t => k => `
    ${Math.round(100 / t * k)}% {
        -webkit-clip-path: ${getKeyframe(k, t)};
        clip-path: ${getKeyframe(k, t)};
    }`;
    
var rule = t => `@keyframes pie {${Array.from(Array(t + 1), (_, i) => i).map(getKeyframes(t)).join("\n")}\n}`;
console.log(rule(4));


Но перед этим были построены точки desmos.com/calculator/z1xftsuv7u
очень круто, правда сложновато в понимании, все-равно спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильная анимация миниатюр на слайдере flexslider jquery akseft jQuery 9 25.01.2017 17:23
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
CSS3 Анимация [Не срабатывает при переключении вкладки] Quasar[CY] (X)HTML/CSS 1 18.11.2015 20:43
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20