[익스프레션3] sourceRectAtTime (텍스트에 Bar크기 맞추기)

텍스트의 크기에 따라 바의 크기가 자동으로 변형된다.

사각형의 Size에 본 값을 대입하고

m = thisComp.layer("ADIDOF").sourceRectAtTime(0).width;  //콤프 레이어에 "(해당텍스트레이어)"
b = thisComp.layer("ADIDOF").sourceRectAtTime(1).height;  
[m+20, b+20]


사각형의 Position 값에 아래 값을 대입한다.

a = thisComp.layer("ADIDOF").sourceRectAtTime(0).width/2;
b = thisComp.layer("ADIDOF").sourceRectAtTime(1).height/2;
c = thisComp.layer("ADIDOF").sourceRectAtTime(1).top;
d = thisComp.layer("ADIDOF").sourceRectAtTime(1).left;
[a+d, b+c]  // [가로길이+좌측, 높이+상단]



[익스프레션] Auto fadeIn+fadeOut(오토 페이드 인)

오펙시티(Opacity)에 대입하는 익스프레션으로

대입하면 자동적으로 페이드인이 시작된다.

따로 키프레임을 생성할 필요가 없다.

v = 1.0;   //v(fadeDuration)
F1 = linear(time, inPoint, inPoint+v , 0, 100);
F2 = linear(time, outPoint - v, outPoint, 0, 100);
F1 + F2 //F1(fadeIn), F2(fadeOut)



[사용법]

대입: Scale, Rotation, Position

사용법: 본 익스프레션을 애니메이션이 걸려진 스케일, 포지션, 로테이션 값에 대입할 수 있다.

애니메이션의 시작과 정지 시 부드럽게 시작하고 멈출 수 있다.

값이 조정은 초록색부분을 재설정하면 좀 더 다른 분위기의 연출이 가능하다.


n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){

n--;

}

}

if (n == 0){

t = 0;

}else{

t = time - key(n).time;

}


if (n > 0 && t < 1){

v = velocityAtTime(key(n).time - thisComp.frameDuration/10);

amp = .05;

freq = 4.0;

decay = 8.0;

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}else{

value;

}

----------------------{하단] 포지션값에 대입하는 익스프레션으로 아웃점에서 통통튀는 효과를 줄 수 있다------------

e = .7;
g = 5000;
nMax = 9;

n = 0;
if (numKeys > 0){
 n = nearestKey(time).index;
 if (key(n).time > time) n--;
}
if (n > 0){
 t = time - key(n).time;
 v = -velocityAtTime(key(n).time - .001)*e;
 vl = length(v);
 if (value instanceof Array){
   vu = (vl > 0) ? normalize(v) : [0,0,0];
 }else{
   vu = (v < 0) ? -1 : 1;
 }
 tCur = 0;
 segDur = 2*vl/g;
 tNext = segDur;
 nb = 1; // number of bounces
 while (tNext < t && nb <= nMax){
   vl *= e;
   segDur *= e;
   tCur = tNext;
   tNext += segDur;
   nb++
 }
 if(nb <= nMax){
   delta = t - tCur;
   value +  vu*delta*(vl - g*delta/2);
 }else{
   value
 }
}else
 value


[익스프레션값] https://docs.google.com/document/d/12ymsMLNA0oiIZc8_iXS9zuEMUH1NGV1zbvwnHkm21DM/edit

[출처] https://www.youtube.com/watch?v=J6EEninU8g0

while은 반복문이다.
~하는 동안... 본 스크립트는 ‘coding’이라는 글자를 10이하로 제한되게 반복해준다.
<script>
       var i=0;
       while(i<10){
          documented.write(‘coding’+i+’<br/>);
       i = i +1;
       }
</script>

--------------------------------------------------------------------------
for문 또한 반복문이나 while의 서술형태를 줄여줄 수 있다.


<script>
    for(i=0; i<10; i=i+1){
          documented.write(‘coding’+ i + ‘<br />’);
    }



<script>

      var id = prompt;
       if (id == ‘사용자아이디’){
            var password = prompt(‘비밀번호를 입렵해주세요’);
            if(password == ‘1111’){
                  alert(‘로그인하였습니다’);
       } else {
            alert(‘비밀번호가 다릅니다.’);
       }
</script>

---------------------------------------------------------------------------

&& 앤퍼샌드 연산자를 이용해 다시 써보기

앤퍼샌드는 '그리고'라는 뜻

<script>
    var id = prompt(‘사용자 아이디를 입렵하세요’);
    var password = prompt(‘패스워드를 입력하세요’);
    if(id===‘사용자아이디’ && password === ‘1111’){
    alert(‘로그인하였습니다’);
   } else {
    alert(‘비밀번호가 다릅니다’)
   }
</script>

---------------------------------------------------------------------------

&& 와 || (or 조건문)을 활용한 예제

<script>
   var id = prompt(‘사용자 아이디를 입력하세요’);
   var password = prompt(‘비밀번호를 입력하세요’);
   if ((id === ‘one’ || id ===‘two’ || id === ‘three’) && password === ‘1111’){
   alert(‘로그인하셨습니다.’);
   } else {
   alert(‘아이디를 잘못 입력하였습니다.’)
   }
</script>

---------------------------------------------------------------------------

!(부정문)

if(' '){

alert('빈문자열');

}   //출력되지 않는다.


if(!undefined){

 alert('undefined);

}  //출력된다. 이유는? !부정뒤에 false가 붙으므로 true가 된다.


'----------------- > 자바스크립트' 카테고리의 다른 글

[코딩공부] While과 For  (0) 2018.08.27

플라이
플라넷 회원들을 위한 선물
여름을 시원하게 보내시라고 반팔티를 준비!
물고기 그라피티가 들어간 티셔츠!
그런데...
배송을 받고 보니 좀 얇다. 너무 얇은거 같기도...

아무튼...
좋으면 댔지...

다음주 회식자리만들어 볼께요!
무더운 여름 잘 보내고 계세요!

'----------------- > 플라이 생각' 카테고리의 다른 글

낚시 이야기  (0) 2018.10.19
Simpler than Fishing  (0) 2018.09.04
타이포 디자인  (0) 2018.07.11
오늘 아침 정선 개미들마을/기화천 사진(장마이후 상황)  (0) 2018.07.06
낚시 가고 싶네...  (0) 2018.06.22

+ Recent posts