Как переместить элемент по кругу в Nativescript? - PullRequest
Новая
       8

Как переместить элемент по кругу в Nativescript?

0 голосов
/ 31 января 2019

При попытке использовать ключевые кадры CSS для перемещения элемента по круговой траектории с помощью функции поворота от 0 до 360 ° и указания радиуса круга с помощью функции перевода, он остается в той же позиции.

Я пробовал этот способ для файла HTML, и он работает нормально.Я добился желаемого движения, указав степень поворота через каждые 6,25% и в некоторых областях 3,125%, что звучит нерегулярно для этого, но оно не движется по точному круговому пути, как в браузере. 

#meePic {
    position: absolute;
    width: 200px;
    height: 200px;
    background-position: center top;
    background-size: cover;
    border-width: 5px;
    border-color: grey;
    border-radius: 50%;
    top: 300px;
    left: 400px;
    animation-name: orbit;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: linear;
}
/* this is the not working code*/
/*@keyframes orbit {
    from {
        transform: rotate(0deg) translate(-50px) rotate(0deg);
    }
    to{
        transform: rotate(360deg) translate(-50px) rotate(-360deg);
    }
}*/

@keyframes orbit {
from {
    transform: rotate(0deg) translate(-50px) rotate(0deg);
}

6.25% {
    transform: rotate(22.5deg) translate(-50px) rotate(-22.5deg);
}

12.5% {
    transform: rotate(45deg) translate(-50px) rotate(-45deg);
}

18.75% {
    transform: rotate(67.5deg) translate(-50px) rotate(-67.5deg);
}

25% {
    transform: rotate(90deg) translate(-50px) rotate(-90deg);
}

31.75% {
    transform: rotate(112.5deg) translate(-50px) rotate(-112.5deg);
}

37.5% {
    transform: rotate(135deg) translate(-50px) rotate(-135deg);
}

43.75% {
    transform: rotate(157.5deg) translate(-50px) rotate(-157.5deg);
}

50% {
    transform: rotate(180deg) translate(-50px) rotate(-180deg);
}

53.125%{
    transform: rotate(191.25deg) translate(-50px) rotate(-191.25deg);
}

56.25% {
    transform: rotate(202.5deg) translate(-50px) rotate(-202.5deg);
}

62.5% {
    transform: rotate(225deg) translate(-50px) rotate(-225deg);
}

68.75% {
    transform: rotate(247.5deg) translate(-50px) rotate(-247.5deg);
}

71.875% {
    transform: rotate(258.75deg) translate(-50px) rotate(-258.75deg);
}

75% {
    transform: rotate(270deg) translate(-50px) rotate(-270deg);
}

78.125% {
    transform: rotate(281.25deg) translate(-50px) rotate(-281.25deg);
}

81.25% {
    transform: rotate(292.5deg) translate(-50px) rotate(-292.5deg);
}

84.375% {
    transform: rotate(303.75deg) translate(-50px) rotate(-303.75deg);
}

87.5% {
    transform: rotate(315deg) translate(-50px) rotate(-315deg);
}

90.625% {
    transform: rotate(326.25deg) translate(-50px) rotate(-326.25deg);
}

93.75% {
    transform: rotate(337.5deg) translate(-50px) rotate(-337.5deg);
}

96.875% {
    transform: rotate(348.75deg) translate(-50px) rotate(-348.75deg);
}

to {
    transform: rotate(360deg) translate(-50px) rotate(-360deg);
}
}

Есть ли что-то, чего я не понимаю в применении ключевых кадров CSS к Nativescript?Или это ошибка в фреймворке Nativescript?

...