waibao
/
NN2022112805


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>pasition - 1kb javascript Path Transition library. </title>

    <style>
        html,body{
            padding:0;
            margin: 0;
            overflow: hidden;
        }
        canvas{
            padding:0;
            margin: 0;
            border: 0;
        }

        #container{
            text-align: center;
        }
    </style>

    <style>
        body {
            background-color: #1e1d23;
            /*opacity: 0;*/
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 2px;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /*body.ready { opacity: 1; }*/


        .icon-text path,
        .icon-text polygon {
            /*opacity: 0;*/
        }

        .info {
            text-align: center;
        }

        .description {
            /*opacity: 0;*/
            color: white;
            margin-top: 10px;
        }

        .links {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: 20px;
        }

        @media (min-width: 700px) {
            .links {
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;

            }
        }

        .button {
            /*opacity: 0;*/
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 180px;
            height: 60px;
            text-decoration: none;
        }

        .button.blue {
            color: #5E89FB;
        }

        .button.green {
            color: #18F38C;
        }

        .button.red {
            color: #FF1461;
        }

        .button svg {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            stroke-width: 1;
            fill: none;
            fill-rule: evenodd;
            stroke: currentColor;
        }

        .button.green svg {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .button path {
            scale: .9;
            transform-origin: 50% 50%;
        }

        .credits {
            /*opacity: 0;*/
            margin-top: 20px;
            color: #979797;
        }

        .credits a {
            position: relative;
            color: currentColor;
            text-decoration: none;
        }

        .credits a:after {
            content: "";
            /*opacity: 0;*/
            display: block;
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 100%;
            border-bottom: 1px solid currentColor;
            transition: opacity .75s ease;
        }

        /*.credits a:hover:after {
          opacity: 1;
          transition: opacity .25s ease;
        }*/

        .credits a,
        .credits span {
            transition: color .75s ease;
        }

        .credits a:hover,
        .highlighted {
            color: white;
            transition: color .25s ease;
        }

        #container{
            margin-top:100px ;
        }


        @media only screen and (max-width: 500px) {

        }
    </style>
</head>

<body>

<div style="display: none;">
    <svg xmlns="http://www.w3.org/2000/svg">
        <path id="pathA" d="M81.025,61.094c-3.896-2.742-8.754-2.549-11.52,1.379c-2.764,3.926-22.088,28.164-53.752,18.102   c1.193,1.039,2.451,2.027,3.771,2.957c20.768,14.625,49.461,9.643,64.086-11.127C86.377,68.476,84.918,63.838,81.025,61.094z    M19.924,58.002C17.906,53.644,6.578,24.789,31.123,2.398c-1.496,0.514-2.98,1.107-4.445,1.787   C3.629,14.861-6.406,42.201,4.27,65.252c2.018,4.357,6.764,5.418,11.088,3.416C19.678,66.666,21.941,62.361,19.924,58.002z    M50.133,0.111c-4.781-0.43-8.072,3.15-8.5,7.895c-0.426,4.746,2.17,8.857,6.953,9.287c4.781,0.432,35.434,5.049,42.549,37.504   c0.305-1.553,0.531-3.135,0.676-4.746C94.092,24.75,75.432,2.392,50.133,0.111z M30.457,48.646   c-1.318,3.102-1.531,6.062-0.473,6.613c0.729,0.381,1.873-0.486,2.943-2.078c0.424,1.736,1.473,3.305,2.971,4.566   c-1.572,0.58-2.598,1.527-2.598,2.6c0,1.766,2.777,3.195,6.205,3.195c3.092,0,5.652-1.162,6.125-2.686   c0.127-0.002,0.615-0.002,0.738,0c0.475,1.523,3.037,2.686,6.127,2.686c3.428,0,6.205-1.43,6.205-3.195   c0-1.072-1.025-2.02-2.598-2.6c1.496-1.262,2.549-2.83,2.971-4.566c1.07,1.592,2.211,2.459,2.941,2.078   c1.059-0.551,0.85-3.512-0.471-6.613c-1.035-2.436-2.441-4.232-3.514-4.629c0.016-0.154,0.023-0.311,0.023-0.469   c0-0.941-0.262-1.811-0.709-2.52c0.008-0.055,0.008-0.111,0.008-0.166c0-0.434-0.104-0.84-0.279-1.191   C56.801,33.335,52.676,28.302,46,28.302c-6.678,0-10.805,5.033-11.074,11.369c-0.178,0.352-0.281,0.758-0.281,1.191   c0,0.055,0.004,0.111,0.006,0.166c-0.443,0.709-0.705,1.578-0.705,2.52c0,0.158,0.006,0.314,0.02,0.469   C32.9,44.414,31.49,46.211,30.457,48.646z"></path>

        <path  id="pathB" d="M93.6,27.1C87.6,34.2,78,39.8,68.4,39c-1.2-9.6,3.5-19.8,9-26.1c6-7.3,16.5-12.5,25-12.9
        C103.4,10,99.5,19.8,93.6,27.1 M102.3,40.9c-13.9-0.8-25.8,7.9-32.4,7.9c-6.7,0-16.8-7.5-27.8-7.3c-14.3,0.2-27.6,8.3-34.9,21.2
        c-15,25.8-3.9,64,10.6,85c7.1,10.4,15.6,21.8,26.8,21.4c10.6-0.4,14.8-6.9,27.6-6.9c12.9,0,16.6,6.9,27.8,6.7
        c11.6-0.2,18.9-10.4,26-20.8c8.1-11.8,11.4-23.3,11.6-23.9c-0.2-0.2-22.4-8.7-22.6-34.3c-0.2-21.4,17.5-31.6,18.3-32.2
        C123.3,42.9,107.7,41.3,102.3,40.9 z"></path>
        <path id="pathC" d="M48,5L42.38,18.26L28,19.48L38.92,28.94L35.64,43L48,35.54L48,35.54L60.36,43L57.08,28.94L68,19.48L53.62,18.26Z"></path>
        <path id="pathD" d="M 40 40 Q 60 80 80 40T 120 40 T 160 40 z"></path>
        <path id="pathE" d="M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32 s32-14.3,32-32S49.7,0,32,0z"></path>

    </svg>
</div>
<div id="container" >
    <canvas id="canvas" width="180" height="180"></canvas>
</div>
<div class="info">
    <p class="description">
        Pasition - 1kb javascript Path Transition library.
    </p>
    <div class="links">

        <a class="button green" href="https://github.com/AlloyTeam/pasition" target="_blank">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
            </svg>
            <span>GitHub</span>
        </a>

        <a class="button blue" href="https://alloyteam.github.io/pasition/" target="_blank">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
            </svg>
            <span>Fill Demo</span>
        </a>

        <a class="button red" href="https://alloyteam.github.io/pasition/large.html" target="_blank">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
            </svg>
            <span>Large-size Demo</span>
        </a>
    </div>
    <p class="credits">
        v<span class="version">1.0.1</span> © <span class="date">2017</span> AlloyTeam.com
    </p>
</div>

<script src="../dist/pasition.js"></script>
<script>
    function renderCurve(context,points,color){
        context.beginPath();
        context.strokeStyle = color||'black';
        context.moveTo(points[0], points[1]);
        context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);

        context.stroke();

    }

    function renderShapes(context,curves,color){
        context.beginPath();
        context.fillStyle = color||'black';
        context.moveTo(curves[0][0], curves[0][1]);
        curves.forEach(function(points){
            context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
        })

        context.closePath();
        context.fill();
    }

    var pathA =  document.querySelector('#pathA').getAttribute('d'),
            pathB=	document.querySelector('#pathB').getAttribute('d'),
            pathC=	document.querySelector('#pathC').getAttribute('d'),
            pathD=	document.querySelector('#pathD').getAttribute('d'),
            pathE=	document.querySelector('#pathE').getAttribute('d')


    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d')


    function animate(arr,indexA,indexB) {
        pasition.animate({
            from: arr[indexA],
            to: arr[indexB],
            time: 1000,
            progress: function (shapes) {
                context.clearRect(0, 0, canvas.width, canvas.height)
                shapes.forEach(function (curves) {
                    //	renderShapes(context,curves,"#006DF0")

                    curves.forEach(function (curve) {
                        renderCurve(context, curve, "#006DF0")
                    })
                })
            },
            end: function () {
                setTimeout(function () {
                    indexA++
                    indexB++
                    if (indexA === arr.length)indexA = 0
                    if (indexB === arr.length)indexB = 0
                    animate(arr, indexA, indexB)
                }, 2000)

            }
        })
    }


    animate([pathA,pathB,pathC,pathD,pathE],0,1)

</script>

</body>

</html>