Question

我一直在使用JQuery和js创建一个滚动并绘制svg路径，就像Ben Laley的这支笔一样：http://codepen.io/paintbycode/pen/JDbcF

它适用于Chrome和Firefox，但IE似乎正在向后播放我的动画，我无法弄清楚原因。

我使用与codepen示例相同的js代码，并使用JQuery。（我对js非常新，对代码格式不正确的道歉）

<script>
$(document).ready(function() {
  var $dashOffset = $(".all").css("stroke-dashoffset");
  $(window).scroll(function() {
    var $percentageComplete = (($(window).scrollTop() / ($("html").height()     - 

$(window).height())) * 100);
    var $newUnit = parseInt($dashOffset, 10);
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    $(".all").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});

Answer 1

以下是svg中流行滚动笔划的一个示例。

var svg = document.getElementById("woman");

var path = svg.getElementsByTagName('path');

function scrollOn(percentage) {
  for (var i = 0; i < path.length; i++) {
    var length = path[i].getTotalLength();
    var amount = length * percentage;
    //console.log(amount);
    path[i].setAttribute("style", "stroke-dashoffset:" + amount + "; stroke-dasharray: " + length + ";");
  }
}

var viewportHeight = $(document).height() - $(window).height()
$(document).scroll(function() {
  var scrollAmount = $(window).scrollTop();
  var percentage = 1 - (scrollAmount / viewportHeight)
  scrollOn(percentage);
});

.fil1 {
  fill: none;
  stroke: black;
  stroke-width: 5;
}
#woman {
  height: 100vh;
  position: fixed;
}

body {
  height: 5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="woman" viewBox="0 0 1000 1500" xmlns="http://www.w3.org/2000/svg">
  <path class="fil1" d="M103.108 748.113c-8.40381,-12.7029 -28.2643,-26.1248 -26.1814,-41.2129 8.13333,-58.8938 178.847,-152.415 205.09,-169.696 70.2671,-46.2705 40.3852,-144.601 58.181,-200.727 24.5786,-77.5224 50.0181,-158.041 98.9086,-223.029 33.7371,-44.8462 67.1071,-88.26 141.091,-88.7271 33.7567,-0.212381 81.091,12.4281 113.453,35.8786 16.6367,12.0548 12.1338,30.731 16,50.909 2.98905,15.6052 13.3133,18.1019 14.5424,35.1967 0.741905,10.3257 4.96667,24.4329 3.8981,38.1914 -1.03286,13.3062 -6.91048,27.019 -4.37952,35.9448 4.5319,15.979 30.7724,29.0124 30.061,46.3033 -0.711905,17.2905 -17.2019,10.1952 -19.1524,18.181 -1.95048,7.98619 8.02238,9.89048 7.51524,16.0005 -0.266667,3.21952 -6.77095,4.76905 -8,7.75667 -1.3581,3.3 4.42095,7.86714 3.87905,11.3943 -0.775714,5.05 -7.35476,7.51762 -8.96952,12.3638 -4.2,12.6043 0.108571,30.3852 -10.1824,38.7886 -12.0281,9.82286 -30.381,6.52714 -46.0595,6.30238 -5.25952,-0.0747619 -15.5824,-2.62048 -18.9095,1.45429 -14.5395,17.8029 -20.9457,38.7152 -27.1505,60.8486 -3.84762,13.7248 -3.72238,29.3843 1.45429,42.6662 2.93381,7.5281 15.8224,7.29762 19.3933,14.5457 29.8276,60.5338 50.8371,125.094 79.5148,186.181 5.78476,12.3224 14.639,23.271 22.6676,34.5186 7.43619,10.419 14.1662,21.0952 17.09,33.3605 4.56,19.1238 -2.79333,39.7719 -9.69667,58.1814 -5.03952,13.4395 -21.1267,21.1495 -25.2124,34.9086 -12.0571,40.6024 -14.371,83.4862 -22.3029,125.091 -7.90619,41.471 -25.5376,81.9043 -25.2119,124.12 0.334286,43.2981 15.6948,85.2738 27.1514,127.03 3.17476,11.5705 12.3376,20.7419 16.4843,32 2.7181,7.3781 -1.03429,19.1214 2.42476,26.1819 5,10.2024 14.7752,24.6562 21.7267,36.5324 4.14905,7.08857 5.4219,12.6376 9.25476,17.5405 6.4519,8.25333 10.59,6.00333 15.0786,15.7448 3.65333,7.93048 -1.47524,17.7995 0.97,26.1819 3.49714,11.9867 23.6376,35.7524 11.1514,35.5781 -149.416,-2.09476 -297.22,-1.85905 -451.392,-1.93905 -4.21619,-0.00190476 -9.87619,-20.1152 -13.0086,-28.97 -3.17238,-8.96952 -10.0871,-10.1467 -14.0152,-19.5205 -62.9857,-150.3 31.38,-241.583 83.2667,-304.178 7.16429,-8.6419 -37.9162,-47.3733 -60.121,-67.879 -41.319,-38.1567 -93.411,-64.8714 -129.939,-107.636 -44.5567,-52.1638 -62.3748,-74.9438 -100.363,-132.363z"
  />
  <path class="fil1" d="M234.636 719.623c3.54524,-11.3395 70.4267,-34.7195 104.242,-61.091 11.1338,-8.68238 7.93762,27.1024 11.6367,40.7271 2.44286,9.00286 -0.248095,33.2443 2.42381,42.181 1.26762,4.23857 7.29714,-10.8205 10.0024,-8.45286 3.66952,3.21238 4.48524,23.4262 9.3919,26.8786 11.6657,8.20952 28.3729,-7.45524 36.3633,4.36238 5.33381,7.8881 2.93571,23.2033 5.98286,32.1105 7.43143,21.721 16.0786,38.9238 21.6533,61.4652 3.46333,14.0033 5.97381,28.299 7.27286,42.6671 1.61619,17.8724 8.75476,37.4252 1.45381,53.8181 -1.65143,3.70714 -7.5619,1.89905 -12.1624,2.65762 -5.75857,0.949524 -10.5681,3.72667 -14.9881,1.22048 -20.7871,-11.7871 -36.3157,-31.2629 -52.3638,-48.969 -23.1533,-25.5457 -43.2495,-54.1957 -64.97,-80.9695 -6.88571,-8.4881 -26.371,-42.7038 -44.8829,-72.8548 -10.9781,-17.8795 -22.2819,-31.829 -21.0557,-35.751z"
  />
  <path class="fil1" d="M634.633 1261.68c2.76095,-12.1281 6.92,-42.9319 15.5152,-33.94 15.8452,16.5757 21.091,44.5505 15.9995,66.909 -2.40762,10.5767 -19.6557,-10.0981 -27.1505,-17.939 -3.60524,-3.77048 -5.52238,-9.94381 -4.36429,-15.03z" />
  <path class="fil1" d="M455.727 130.53c-24.5652,16.4852 -58.3595,35.201 -73.6967,49.4548 -22.2171,20.6476 -12.6557,44.5881 -6.30286,69.3333l4.36429 6.30286" />
</svg>

如何完成。我们为stroke-dasharray属性设置动画。

长篇解释：

找到我们窗口的高度：$（document）.height（） - $（window）.height（）
找出当前滚动：$（窗口）.scrollTop（）;
将其添加到滚动事件：$（document）.scroll（[...]）
添加百分比（0到1）:( scrollAmount / viewportHeight）
使用此百分比绘制路径偏移：se scrollOn（）
将计算出的stroke-dashoffset添加到其样式

Answer 2

好的，所以这段代码解决了这个问题：

import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.InputStream;
import java.net.URL;
import java.util.Iterator;
import java.util.LinkedList;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;

public class TestGetGroupMembers {

    private final String URL_BASE_GRAPH_METHOD1 = "https://graph.facebook.com/v2.5/";
    private final String URL_BASE_GRAPH_METHOD2 = "https://graph.facebook.com/";
    private final String GROUP_ID = "188295541208911";
    private final String TOKEN = "xxx";
    private int totalNumberPages = 0;
    public TestGetGroupMembers() {
        try {
            execute();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    private void execute() throws Exception {
        String outFileMethod1 = "outMethod1.txt";
        String outFileMethod2 = "outMethod2.txt";
        LinkedList<String> results1 = getGroupMembers(URL_BASE_GRAPH_METHOD1, GROUP_ID);
        System.out.println("Saving results of method 1..");
        save(results1, outFileMethod1);
        System.out.println("Number of pages processed: " + this.totalNumberPages);
        this.totalNumberPages = 0;
        LinkedList<String> results2 = getGroupMembers(URL_BASE_GRAPH_METHOD2, GROUP_ID);
        System.out.println("Saving results of method 2..");
        save(results2, outFileMethod2);
        System.out.println("Number of pages processed: " + this.totalNumberPages);
    }

    /*
     * The method 1 uses v2.5 version of the API which loads users using 25 users per page.
     */
    private LinkedList<String> getGroupMembers(String urlBase,  String groupID) throws Exception {
        LinkedList<String> ret = new LinkedList<String>();
        String urlStr = urlBase + groupID
                + Constants.SEPARATOR + "members?access_token=" + TOKEN;
        URL url = new URL(urlStr);
        getMembers(urlStr, url.openStream(), ret);
        return ret;
    }

    private void getMembers(String url, InputStream is, LinkedList<String> ret) throws Exception {
        totalNumberPages++;
        System.out.println("Processing url: " + url);
        ObjectMapper om = new ObjectMapper();
        JsonNode root = om.readValue(is, JsonNode.class);
        Iterator<JsonNode> itRoot = root.get("data").iterator();
        while (itRoot.hasNext()) {
            JsonNode node = itRoot.next();
            if (node != null) {
                JsonNode id = node.get("id");
                JsonNode name = node.get("name");
                ret.add(name.asText() + " (" + id.asText() + ")");
            }
        }
        JsonNode paging = root.get("paging");
        if (paging != null) {
            JsonNode nextPage = paging.get("next");
            if (nextPage != null) {
                String urlNext = nextPage.asText();
                is.close();
                URL urlNxt = new URL(urlNext);
                getMembers(urlNext, urlNxt.openStream(), ret);
            }
        }
    }
    private void save(LinkedList<String> lst, String f) throws Exception {
        BufferedWriter bW = new BufferedWriter(new FileWriter(f));
        for (int i = 0; i < lst.size(); i++) {
            String n = lst.get(i);
            bW.write(n);
            bW.newLine();
        }
        bW.close();
        System.out.println("File " + f + " written. " + lst.size() + " lines");
    }
    public static void main(String[] args) {
        new TestGetGroupMembers();

    }

}

基本上，这一行：

<script>
$(document).ready(function() {
   var $dashOffset = $(".all").css("stroke-dashoffset");
   $(window).scroll(function() {
    var $percentageComplete = (($(window).scrollTop() / 
($(document).height() + $(window).height())) * 100);
    var $newUnit = parseInt($dashOffset, 10);
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    $(".all").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});
</script>

替换为：

var $percentageComplete = (($(window).scrollTop() / ($("html").height() -
$(window).height())) * 100);

我希望这对你们来说是有道理的，我仍然在讨论正在发生的事情。

IE在滚动时向后绘制svg

2 个答案: